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



















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




























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






























Everything about BLE with iOS Part1 (Introduction)




























  In this article we will learn how to turn your iPhone to behave as peripheral (who has data to send) or central (who receive the data).        What is BLE (Bluetooth Low energy device) ?     Bluetooth LE is a wireless personal area network technology like its previous incarnation, Classic Bluetooth. It can be use to transfer and receiving of the data.       What is difference between Classic and LE ?   BLE has low power consumption and low data transfer rate. BLE can support large number of slaves. On the other hand Classic (3.0) support maximum 7 devices connectivity. Unique feature of BLE is advertising  functionality,  So other devices can scan,  connect and  receive data from the advertising BLE device. Other difference is in classic you need to pair the devices first for the communication.     Terms:    Peripheral:  It is device which advertise the service. In client-server architecture form we can say peripheral is...















Post a Comment









Read more