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





















Implement orientation modes in iPhone Hybrid Applications




























   Let suppose you are working on a hybrid application which runs only in single (portrait) mode. One day a requirement come that PDF and Doc Viewer (HTML Page) should support both (landscape, portrait) mode. Your Application loads all the HTML content from the local html files and you need to implement the above functionality only for one HTML file.                                    Let break the above task in the modules:   Step 1:                        Application should detect when the PDF and Doc viewer is open in application. I setup location.href tag in html to " docvieweron:// " and " docvieweroff:// " when page is open and closed respectively. In this way I am getting a delegate callback in web view:   WebViewDelegate:    - ( BOOL ) webView:( UIWebView *)webView shouldStartLoadWithRequest:( NSURLRequest *)request     navigationType: ( UIWebViewNavigationType )navigationType   {              NSString * urlString = [[request URL ] absoluteString ];...















Post a Comment









Read more






























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 Handl...















Post a Comment









Read more






























iOS8 UIWebView Remove or Modify Keyboard Toolbar




























   Remove Toolbar:                One of my client requirements is to remove the default toolbar for the keyboard. I found numerous examples for iOS7 to remove toolbar from the keyboard window. But it did not work for iOS8. So i came to following solution after some Research on Google:           Step1:      First we need to add observer for keyboard notification:       [[ NSNotificationCenter  defaultCenter ]  addObserver : self  selector : @selector ( removeKeyboardTopBar :) name : UIKeyboardWillShowNotification  object : nil ];    Step 2:    We need to implement the method for observer:      - ( void )removeKeyboardTopBar {          }     Step 3:    Find the keyboard window from all the application  windows:       - ( void )removeKeyboardTopBar {       UIWindow  *keyboardWindow = nil ;      UIView * toolBarContainer = nil ;       NSArray * windows = [[ UIApplication  sharedApplication ] windows ];      for  ( U...















Post a Comment









Read more