Skip to main content

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];














































Comments











Post a Comment






























Popular posts from this blog





















Asynchronous Request with NSOperationQueue 




























 Today post is about how to run a asynchronous task in NSOperationQueue.  Generally we do not run a Asynchronous task in NSOperationQueue. It is also not recommended for any programmer to do that. This post is only for learning purpose what will happen if we schedule a asynchronous task in a queue and how can we complete that task:). So let us move to the learning:       NSOperationQueue:    In iOS NSOperationQueue is a class, which provide a way to perform operation concurrently. We also have others way to perform concurrent operation:     1) GCD   2) NSThread   3) pThread     NSOperationQueue is a wrapper on GCD, which provides a very convenient way to execute operation concurrently. To create a Queue for Operation you have to simply allocate a object of the class:     NSOperationQueue * opertionQueue = [[ NSOperationQueue  alloc ] init ];     For this post let suppose you are making a queue to handle all Http request in your application. So i want to create a queue in Handler class 















Post a Comment









Read more




























NSThread with Asynchronous Request




























    NSThread:   It is class used in Cocoa framework to create a thread.You have to specify a target and selector to create a new thread in objective c. So the selector or method is main entry point of your thread.      Detail:     What happen once the thread execute all the code in the method (Thread main routine)?     Thread is terminated after execute all the code in the entry(its main routine) routine. So how we can run an asynchronous request on NSThread ?   What is Async request?   It is non blocking request which permit the application to do other task side by side as request is in continue. So it enhance parallelism in the application.    Now question is how we can prepare a asynchronous request in iOS:    - ( void ) startAsyncRequestWithUrl:( NSString *)urlString{       assert (urlString != nil  && urlString. length  > 0 );       NSURL * url = [[ NSURL  alloc ] initWithString :urlString];       NSURLRequest * urlRequest = [[ NSURLRequest  alloc ] initWithURL :url cac















Post a Comment









Read more