Shake Effect in iOS

Animation

Animation always capture the user attention. We can use animation to update things on the screen.  For developer also animations fascinated things to learn and implement.

Today we will try shake effect with Various  API.

CABasicAnimation:

Here we animate view's frame y coordinate from one position to another position. It is simple example of changing the position with respect to time. CABasic Animation is deal with the single keyframe.

                                       y(t) = y0 + t*d(y)

You can use CABasic Animation if you have to play with single value. You need to move object from  one position to another without any intermediate steps.

CABasicAnimation* shakeAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
shakeAnimation.duration = 0.05;
shakeAnimation.autoreverses = YES;
shakeAnimation.repeatCount = 6;
CGPoint shakeFromPoint = CGPointMake(self.shakeLabel.center.x, 
                                self.shakeLabel.center.y - 10);
shakeAnimation.fromValue = [NSValue valueWithCGPoint:shakeFromPoint];
CGPoint shakeToPoint = CGPointMake(self.shakeLabel.center.x,
                                self.shakeLabel.center.y + 10);
shakeAnimation.toValue = [NSValue valueWithCGPoint:shakeToPoint];
[self.shakeLabel.layer addAnimation:shakeAnimation forKey:@"position"];

CAKeyFrameAnimation:

It gives more flexibility to developer for adding multiple steps in animation. The above shake effect can be more smooth by using CAKeyFrame Animation. We can add multiple position in the above animation, so that it should reduce gradually not immediately. 

CGPoint position = self.shakeLabel.center;
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(position.x, position.y)];
[path addLineToPoint:CGPointMake(position.x, position.y-20)];
[path addLineToPoint:CGPointMake(position.x, position.y)];
[path addLineToPoint:CGPointMake(position.x, position.y-20)];
[path addLineToPoint:CGPointMake(position.x, position.y)];
[path addLineToPoint:CGPointMake(position.x, position.y - 10)];
[path addLineToPoint:CGPointMake(position.x, position.y)];
[path addLineToPoint:CGPointMake(position.x, position.y - 10)];
[path addLineToPoint:CGPointMake(position.x, position.y)];
[path addLineToPoint:CGPointMake(position.x, position.y - 5)];
[path addLineToPoint:CGPointMake(position.x, position.y)];
CAKeyframeAnimation *shakeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
shakeAnimation.path = path.CGPath;
shakeAnimation.duration = 0.7;
shakeAnimation.timingFunction = [CAMediaTimingFunction functionWithName
kCAMediaTimingFunctionEaseInEaseOut];
[CATransaction begin];
[self.shakeLabel.layer addAnimation:shakeAnimation forKey:@"position"];
[CATransaction commit];

I have used path property to add a y position path. You can modify the code to make a simple mathematically formula.

CGAffineTransformAnimation(Matrix):

One more example for the same shake animation with transform. This time we are adding animation on view not on layer. 

CGAffineTransform upShake  = CGAffineTransformMakeTranslation(0, 10);
CGAffineTransform downShake = CGAffineTransformMakeTranslation(0, -10);
self.shakeLabel.transform = upShake;
[UIView beginAnimations:@"shake" context:(__bridge void * _Nullable)(_shakeLabel)];
[UIView setAnimationRepeatAutoreverses:YES]; // important
[UIView setAnimationRepeatCount:6];
[UIView setAnimationDuration:0.07];
self.shakeLabel.transform = downShake;
[UIView commitAnimations];