image

Bringing iOS Graphics To Life With Advanced Animations

Most of the developers must have used UIViewAnimateWithDuration once in their lifetime. The method is a straight forward message to create great effects and animation.

What if we can make these animations more realistic? Here comes the new method:

[UIView animateWithDuration:(CGFloat)duration delay:(CGFloat)delay
usingSpringWithDamping:(CGFloat)damping initialSpringVelocity:(CGFloat)velocity options:(UIviewAnimationOptions)options
animations:^() (animations)
completion:^(BOOL finished) (completion)]

It’s quite a long signature to digest. Take this as an object attached to a spring at one end. And we move that object. We can control the spring strength, velocity and other parameters. This can be used for rotation, scale and transformation, anything that a standard animation can be used for.

Instead of just animating a view to some point on the screen, this new spring-based animation makes transitions lively. It enables a view to bounce as it approaches its targeted position.

Lets take a look at parameters:

Damping:

It’s a float between 0 and 1. It denotes how strong the spring is. If we set this value to 1 our object will no oscillate at all. It will slow down until reaching the target value. Other way round if we set this value to 0, our object will oscillate infinitely.

SpringVelocity:

This is the magic parameter that makes some really cool stuff possible. As mentioned in the header comment, a value of 1.0 is defined as traveling the total animation distance in one second. If you give it a negative number then your animation will start by “popping” in the opposite direction before springing back.

Options:

A mask of options indicating how you want to perform the animations. For a list of available options, see http://goo.gl/2McElE

Apple encourages us to create user interfaces that feel real. Spring animations give a realistic touch to animations but ultimate goal is to create interfaces, which react to touch, gestures, motion and orientation. In order to create truly realistic animations before the release of iOS 7, it was necessary to have a deep understanding of math, physics and other sciences. To overcome this Apple introduced UIKit Dynamics.

UIKit Dynamics is a complete physics engine integrated into UIKit. Its the new and easiest way to animate user interface with some really good effects. It allows us to add different types of behaviors to UIKit elements. An underlying two-dimensional physics engine powers them, Interesting part is that it does not require knowledge of the physics implementation to create some really nice effects. We only need to add the behaviors and the rest is taken care by the engine.

Only a few steps are required to give you app nice effects:

1.  Create a UIDynamicAnimator
2.  Create one or more UIDynamicBehaviour
3.  Add this behavior to UIDynamicAnimator
4.  Enjoy

Dynamic behaviors can be subclassed. You can implement your own behaviors. And they are composable; you can add more than one behavior is a single custom behavior class.

Simple example can be:

self.animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];

UIGravityBehavior *gravityBehavior = [[UIGravityBehavior alloc] initWithItems:@[self.movingUIElement]];

[self.animator addBehavior:gravityBehavior];

UICollisionBehavior* collisionBehavior = [[UICollisionBehavior alloc] initWithItems:@[self.movingUIElement]];

collisionBehavior.translatesReferenceBoundsIntoBoundary = YES;

[self.animator addBehavior:collisionBehavior];

drop

To see more behaviors and details about UIKit Dynamics see: http://goo.gl/kK4uIW

The article is contributed by Shujaat Hussain – Lead iOS App Development at TechArete.