There are many properties that make a great application. But, personally, whenever an app welcomes me with a cute animation I’m far more likely to try its features. Sometimes it takes one simple animation to engage the user a whole lot more and make him feel happy about using an app.
Having said that, I really feel like projects skimp on them assuming they are so time consuming that the effort won’t pay off in the final product. However, iOS makes it really simple to perform animations, just putting your interface change code inside of the default:
[UIView animateWithDuration:(NSTimeInterval) animations:^(void)animations]
Block can immediately transform out of the blue appearances to smooth transitions. It literarily takes one line of code so I don’t think I need to persuade anybody to use it.
But you can go even further with this.
Add cute animations to your app with POP
I recently discovered a framework from Facebook called POP. It gives you the whole package of real world physics-based animations. And the best part is that its APIs are almost as easy as the default one.
Let me show you.
POP has three build in types of animations: POPBasicAnimation, POPSpringAnimation and POPDecayAnimation.
After you initialise them:
POPBasicAnimation *lineAnimation = [POPBasicAnimation easeInEaseOutAnimation];
POPSpringAnimation *checkAnimation = [POPSpringAnimation animation];
You need to pick one of supported properties to animate ex:
lineAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewFrame];
checkAnimation.property = [POPAnimatableProperty propertyWithName:kPOPLayerSize];
Then set fromValue and toValue respectively:
lineAnimation.fromValue = [NSValue valueWithCGRect:CGRectMake(0, 10, 0, lineHeigth)];
lineAnimation.toValue = [NSValue valueWithCGRect:CGRectMake(0, 10, lineWidth, lineHeigth)];
checkAnimation.fromValue = [NSValue valueWithCGSize:CGSizeZero];
checkAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(checkmarkWidth, checkmarkWidth)];
Set begin time:
lineAnimation.beginTime = CACurrentMediaTime();
checkAnimation.beginTime = CACurrentMediaTime() + lineAnimation.duration;
Lastly you add the animation to the desired object:
[self.firstLine pop_addAnimation:lineAnimation forKey:@"lineAnimation"];
[self.firstCheck.layer pop_addAnimation:checkAnimation forKey:@"checkAnimation"];
The key property here is used to identify the animation. As the documentation states: “The 'key' may be any string such that only one animation per unique key is added per object”.
And that’s it, you just gave your app a cute animation kick!
You can probably imagine that there are lots of properties to edit. To give you an idea the ones I use the most are:
lineAnimation.duration = 0.5f; // Duration
lineAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]; // Timing function
checkAnimation.springBounciness = 10; // Spring animation bounciness checkAnimation.springSpeed = 3; // Spring animation speed
And those go as far as velocity, friction or even animating your custom properties. You can use delegate callbacks to chain animations. Add support for user gestures. The possibilities are endless.
There are further reading materials and tutorials about all of this on the GitHub page, with this one - 5 Steps For Using Facebook Pop - being a good starting point.
And here is how above code, repeated for three elements work:
I highly encourage you to try it and use this over and over. Adding cute animations is way easier then it appears to be.
Great results and happy users are guaranteed!
Found this article useful? You might like these ones too!