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



















Constant Weds Literals Venue Objective C




























  Arrangement:    While working on a application you may have used some predefined values. The visibility of these values can be application level, feature level or class level. For the  convenience  we give name to these values and then use in the application. In this case the name given by you only representing the single value and it never change to represent some other value thats why it is called Constant.       On the other hand variables are like us doing jobs in IT World and can switch from one organization( value ) to other.     Like while choosing a partner for marriage you may choose best for you by seeing multiple persons and still after sometime you feel stuck. Same may happen you choose a best option to declare a constant and after sometime this constant can create a issue for you in code due to its scope or any other reason. On the other hand you may have a fixed mind that you always declare a constant in a same way in any situation like a love ma...















Post a Comment









Read more






























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




























Best Practices in iOS with Objective - C




























  In this post i am making collection of points which i read from some other post or some documentation. Today we will learn what are good or bad habits while doing programming in objective - c.   1) Instance Type and id  I noticed one day that in iOS SDK init method of class has  instancetype  as a return value. I am curious to know about this thing and why this type not id. So what i found is following:   Example:    - ( instancetype )initWithProximityUUID:( NSUUID  *)proximityUUID identifier:( NSString  *)identifier   What is instancetype?   Suppose you are writing a method for object initialisation and according to objective c coding convention you need to return the object of same class from the method. So you can use instance type as a return type of method.   Instance Type -  It represents the instance of the class or subclass of the class in which you are writing the method with return type instancetype.   Confusing ?   Let suppose i have declare a class empl...















Post a Comment









Read more