Core Animation Part I: Introduction

One of my favorite iOS frameworks is for sure Core Animation, because it offers you some powerful tools to realize what you create with your imagination.

In previous posts, I showed a little bit how to use Core Graphics and now it’s time to give a look at how to use Core Animation, so that you can combine these two frameworks to create beautiful things.

You’ll see that it’s really easy to do simple things with this framework, but when you want to make extremely complex animations, then you really need to understand about geometry and mathematics. However, the aim of CA is not to create complex and confusing animations on your interface. Instead, you should use CA to improve the usability of your app and make it more intuitive from a usability point of view. I want to show how to drain the full power of this framework. But don’t worry, I’ll go step by step.

So, first of all let’s start with some definitions. What is then Core Animation? The Apple documentation says:
Core Animation is a collection of Objective-C classes for graphics rendering, projection, and animation. It provides fluid animations using advanced compositing effects while retaining a hierarchical layer abstraction that is familiar to developers using the Application Kit and Cocoa Touch view architectures.

I am sure you understand what a graphics rendering, a projection and animation are, but, what do they really mean? Ad what’s the hierarchical layer abstraction. We will find it out during this tutorial. I hope you’ll enjoy it.

Before we start I want to mention some of the resources available for this framework. First of all, you have the Apple documentation and more precisely you should look for:

  • Core Animation Programming Guide; and
  • Core Animation Cookbook

The second resource is a quick start to CA, but it has more or less the same style of the Programming Guide. So, again, useful, but when you already know something about Core Animation.

Basic view animations

The iOS SDK comes with some methods that make animation very easy to implement. Give a look at the UIView class. There is a bunch of methods grouped under Animating Views and Animating Views with Block Objects that you can use for this scope. All the methods listed in the section Animating Views are quite old and Apple discourages to use them after iOS 4. So, I am not going to show you here how they work. Starting from iOS 4, you should use the methods listed under the section Animating Views with Block Objects.

The following piece of code demonstrates how you use these methods. Let’s start from the simplest method.
We are going to move a view from its current position (not specified in the following animation block) to a final position (200, 300).

I am assuming I have a view (myView) placed at (20, 30). CA uses the upper-left corner of the screen as the origin of the reference system with the x growing from left to right and y growing from up to down. So, the upper-left point of the screen has coordinates (0, 0) and it represents the coordinates system origin.

The previous lines of code set the duration of the animation and the final position of the myView view.
If you want to animate more than a view property at the same time (for example, view position, opacity and size), you can do it just setting the new value of these properties in the animations bloc. The drawback is the different properties will animate simultaneously. Even if you create a sequence of code blocks similar to the previous one and each of them setting a different view property, the animation will be fired at the same run-loop cycle (or maybe during two consecutive run-loops), but you will not be able to visually discriminate them. This inconvenient behavior is solved used more complex techniques.

Now, most of the time, this type of animations is enough to make your interface look nicer and since it is very easy to implement, you can really use it whenever you need without writing too much code.

Let’s make a concrete example with the Animation Views. So, launch Xcode and create a view-based iPhone project. Name it, BasicAnimation. In the BasicAnimationViewController.xib file, add on the main view a small view 100 x 100 positioned at the point (130, 130) and change its background to red. You should get something like this:

In the BasicAnimationViewController class, add an outlet of type UIView and connect it to the red view you created. Let’s also add an IBAction and name it fire. Now, add the following code to the button action:

Build and run the project. When the app launches, press the button and you will see the red view moving to bottom left of the screen and then, moving back. You will also notice that, once the animation is completed, the view jump to its final position. Nothing is wrong, since that’s the position we specified in the previous code. If you want the view to stop to its initial position, you have to set the view position to its initial value.

Now, try to experiment a little bit with the different methods provided in UIView. I am sure you will not understand everything, but it does not matter at the moment. Later you will master everything.

Next time

Next time, we will give a look to a different type of animation. To make things more flexible, Apple provided us with a bunch of classes collected all together in the Core Animation framework.



(Visited 166 times, 1 visits today)