iOS SDK Quick Tip: Working with Animations

iOS SDK animations allow you to spice up your applications with appealing visual effects and transitions. With the iOS SDK, animations are frequently used to repositions views, resize views, remove or add views from view hierarchies, and hide views altogether. Read on to learn how these effects are achieved!

To create an animation with the iOS SDK you don’t have to write any custom drawing code. All you have to do is trigger the animations with a few simple calls and the Core Animation framework will do the hard work. With this framework you can create a animation in just a few lines of code, and that’s a good thing for us as lazy developers!

In UIKit, animations are performed using UIView objects. You can animate changes to properties of view or use transition animations to replace one set of views with another. You can animate the following UIView properties with UIKit:

  • frame
  • bounds
  • center
  • transform
  • alpha
  • backgroundColor
  • contentStretch

If your application runs in iOS 3.2 and earlier, you must use the beginAnimations:context: and commitAnimations class methods of UIView to define your animation blocks. This is the method I will use in this quick tip, because it works on all iOS versions.

To begin an animation block, you will use [UIView beginAnimations:(NSString *) context:(void *)];. After writing the code to setup your animation (i.e. changing the UIView properties), you will end the animation block with [UIView commitAnimations];.

You can configure an animation block with the following UIView class methods:

  • animation start date
  • animation delay
  • animation duration
  • animation curve
  • animation repeat count
  • animation repeat autoreverses
  • animation delegate
  • animation will start selector
  • animation did stop selector
  • animation beings from current state

With the begin and commit code above, you can create an animation. To see this in practice, let’s look at an example:

As you can see, I started the animation block with [UIView beginAnimations:(NSString *) context:(void *)]; and called it “My First Animation”. After that I set the duration to 1 second and the delay to 2 seconds, so the animation will start after two seconds and it will take 1 second to complete. With this animation I animate the view's background color to a red color. If the view's background color was already red, you won’t see the animation, but it will still animate. At last I end my animation block with [UIView commitAnimations];.

Here is a sample of an animation where we rotate in a view:

The setup of this animation block looks the same as the previous one, only this time I used the animation delegate and used the transform property. If you want to use the did stop selector method, you will need to set the delegate to self. So, if this animation is done the method rotateBack will be called. With the transform property you can scale, rotate, or translate a view. The transformation will always be in 2D. For the angle of the rotation I used M_PI as you can see. By default, Objective-C works with radians instead of degrees. 360 degrees is the same as 2∏, so the view will rotate 180 degrees.

This is the method which will be called when the rotate animation is done. In this animation block we rotate the view back to its original place. We do that with the CGAffineTransformIdentity function. This will undo the rotate transformation.

Interested in learning more? You can see some more animation examples in the source code attached.

I hoped you liked this iOS SDK quick tip on animations! Please let me know your feedback by leaving a comment below. You can also suggest ideas for additional tutorials for us to cover in the future!

Tags:

Comments

Related Articles