Shake Animation for Uitextfield/Uiview in Swift

Shake Animation for UITextField/UIView in Swift

You can change the duration and repeatCount and tweak it. This is what I use in my code. Varying the fromValue and toValue will vary the distance moved in the shake.

let animation = CABasicAnimation(keyPath: "position")
animation.duration = 0.07
animation.repeatCount = 4
animation.autoreverses = true
animation.fromValue = NSValue(cgPoint: CGPoint(x: viewToShake.center.x - 10, y: viewToShake.center.y))
animation.toValue = NSValue(cgPoint: CGPoint(x: viewToShake.center.x + 10, y: viewToShake.center.y))

viewToShake.layer.add(animation, forKey: "position")

How to make UIButton shake on tap?]

Here is simple media timing animation for linear movement & UIView damping animation.

Note: Swift 4

extension UIView {

    // Using CAMediaTimingFunction
    func shake(duration: TimeInterval = 0.5, values: [CGFloat]) {
        let animation = CAKeyframeAnimation(keyPath: "transform.translation.x")

        // Swift 4.2 and above
        animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)

        // Swift 4.1 and below
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)

        animation.duration = duration // You can set fix duration
        animation.values = values  // You can set fix values here also
        self.layer.add(animation, forKey: "shake")
    }

    // Using SpringWithDamping
    func shake(duration: TimeInterval = 0.5, xValue: CGFloat = 12, yValue: CGFloat = 0) {
        self.transform = CGAffineTransform(translationX: xValue, y: yValue)
        UIView.animate(withDuration: duration, delay: 0, usingSpringWithDamping: 0.4, initialSpringVelocity: 1.0, options: .curveEaseInOut, animations: {
            self.transform = CGAffineTransform.identity
        }, completion: nil)

    }

    // Using CABasicAnimation
    func shake(duration: TimeInterval = 0.05, shakeCount: Float = 6, xValue: CGFloat = 12, yValue: CGFloat = 0){
        let animation = CABasicAnimation(keyPath: "position")
        animation.duration = duration
        animation.repeatCount = shakeCount
        animation.autoreverses = true
        animation.fromValue = NSValue(cgPoint: CGPoint(x: self.center.x - xValue, y: self.center.y - yValue))
        animation.toValue = NSValue(cgPoint: CGPoint(x: self.center.x + xValue, y: self.center.y - yValue))
        self.layer.add(animation, forKey: "shake")
    }

}

Button Action

@IBAction func noButtonPressed(button: UIButton) {

  // for spring damping animation
  //button.shake()  

  // for CAMediaTimingFunction
  button.shake(duration: 0.5, values: [-12.0, 12.0, -12.0, 12.0, -6.0, 6.0, -3.0, 3.0, 0.0])

 // for CABasicAnimation
 //button.shake(shakeCount: 10)  

}

How do you make a shake animation for a button using Swift 3

if I understood you correctly, try this on shake animation.
Simply use this method in your UIButton subclass

class CustomButton: UIButton {

    func shake() {
        let animation = CAKeyframeAnimation(keyPath: "transform.translation.x")
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
        animation.duration = 0.6
        animation.values = [-20.0, 20.0, -20.0, 20.0, -10.0, 10.0, -5.0, 5.0, 0.0 ]
        layer.add(animation, forKey: "shake")
    }
}

Then you create CustomButton somewhere in code or storyboard/xib and call myButton.shake()

You can simply adopt this solution on your needs

UPD: I have edit example than exactly fitted your needs

UPD2: another one solution
Just create UIButton extension

extension UIButton {

    func shake() {
        let animation = CAKeyframeAnimation(keyPath: "transform.translation.x")
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
        animation.duration = 0.6
        animation.values = [-20.0, 20.0, -20.0, 20.0, -10.0, 10.0, -5.0, 5.0, 0.0 ]
        layer.add(animation, forKey: "shake")
    }

}

ans use on you button action callback:

@IBAction func shake(_ sender: UIButton) {
    sender.shake()
}

How to do text field shake effect?

Please try the following code:

// Change the 10 & -10 values as you wish
CGAffineTransform leftWobble = CGAffineTransformRotate(CGAffineTransformIdentity, RADIANS(-10.0));
CGAffineTransform rightWobble = CGAffineTransformRotate(CGAffineTransformIdentity, RADIANS(10.0));

textField.transform = leftWobble;

[UIView animateWithDuration:0.25
        delay:0
        options:(UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse) animations:^{

        [UIView setAnimationRepeatCount:6]; // Change this value as you want

        textField.transform = rightWobble;

} completion:^(BOOL finished){

        textField.transform = CGAffineTransformIdentity;

}];

View shake animation error when clicked

You can try this code. It should be helpful:

extension UIView {

    func shakeByX() {
        let animation = CABasicAnimation(keyPath: "position")
        animation.duration = 0.07
        animation.repeatCount = 3
        animation.autoreverses = true
        animation.fromValue = NSValue(cgPoint: CGPoint(x: self.center.x - 6, y: self.center.y))
        animation.toValue = NSValue(cgPoint: CGPoint(x: self.center.x + 6, y: self.center.y))
        self.layer.add(animation, forKey: "position")
    }

    func shakeByY() {
        let animation = CABasicAnimation(keyPath: "position")
        animation.duration = 0.07
        animation.repeatCount = 3
        animation.autoreverses = true
        animation.fromValue = NSValue(cgPoint: CGPoint(x: self.center.x, y: self.center.y - 6))
        animation.toValue = NSValue(cgPoint: CGPoint(x: self.center.x, y: self.center.y + 6))
        self.layer.add(animation, forKey: "position")
    }
}

Shake animation for NSTextField

I ended up using recurring NSAnimationContext animation groups each one calling another on completion. If there is a better way to do this I am still looking. But incase anyone else needs this here is my solution

NSRect textFieldFrame = [textfield frame];

CGFloat centerX = textFieldFrame.origin.x;
CGFloat centerY = textFieldFrame.origin.y;

NSPoint origin = NSMakePoint(centerX, centerY);
NSPoint one = NSMakePoint(centerX-5, centerY);
NSPoint two = NSMakePoint(centerX+5, centerY);

[NSAnimationContext beginGrouping];
[[NSAnimationContext currentContext] setCompletionHandler:^{

    [NSAnimationContext beginGrouping];
    [[NSAnimationContext currentContext] setCompletionHandler:^{

        [NSAnimationContext beginGrouping];
        [[NSAnimationContext currentContext] setCompletionHandler:^{

            [NSAnimationContext beginGrouping];
            [[NSAnimationContext currentContext] setCompletionHandler:^{

                [[NSAnimationContext currentContext] setDuration:0.0175];
                [[NSAnimationContext currentContext] setTimingFunction: [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut]];
                [[textfield animator] setFrameOrigin:origin];

            }];

            [[NSAnimationContext currentContext] setDuration:0.0175];
            [[NSAnimationContext currentContext] setTimingFunction: [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut]];
            [[textfield animator] setFrameOrigin:two];
            [NSAnimationContext endGrouping];

        }];

        [[NSAnimationContext currentContext] setDuration:0.0175];
        [[NSAnimationContext currentContext] setTimingFunction: [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut]];
        [[textfield animator] setFrameOrigin:one];
        [NSAnimationContext endGrouping];
    }];

    [[NSAnimationContext currentContext] setDuration:0.0175];
    [[NSAnimationContext currentContext] setTimingFunction: [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut]];
    [[textfield animator] setFrameOrigin:two];
    [NSAnimationContext endGrouping];

}];

[[NSAnimationContext currentContext] setDuration:0.0175];
[[NSAnimationContext currentContext] setTimingFunction: [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut]];
[[textfield animator] setFrameOrigin:one];
[NSAnimationContext endGrouping];

How to make shaking animation

Here's the code I use for that effect.

 -(void)shakeView {

        CABasicAnimation *shake = [CABasicAnimation animationWithKeyPath:@"position"];
        [shake setDuration:0.1];
        [shake setRepeatCount:2];
        [shake setAutoreverses:YES];
        [shake setFromValue:[NSValue valueWithCGPoint:
                                 CGPointMake(lockImage.center.x - 5,lockImage.center.y)]];
        [shake setToValue:[NSValue valueWithCGPoint:
                               CGPointMake(lockImage.center.x + 5, lockImage.center.y)]];
        [lockImage.layer addAnimation:shake forKey:@"position"];
    }

As Jere mentioned. Make sure to include the import:

#import <QuartzCore/QuartzCore.h>

You can also add it as a category on UIView.

Unwanted UIView frame reset after inserting text in UITextField

Make sure either:

A. Your contentView does not have any layout constraints attached to it, or else when you set its frame, its frame will be reset on the next layout pass back to what the constraints say the frame should be.

or:

B. Use a constraint to position your contentView's vertical offset relative to the keyboard instead of adjusting its frame.

---

Related Topics