Lehrstuhl für Angewandte Softwaretechnik
Chair for Applied Software Engineering

“Tell me and I will forget.

Show me and I will remember.

Involve me and I will understand.

Step back and I will act.”  

 

iOS Core Animation Tutorial

written by Lukas Rinke

 

 

Table of Contents

  1. Introduction
  2. Motivation
  3. UIView and CALayer
    1. UIView geometry and its animatable properties
    2. Underlaying CALayer
  4. Core Animation
    1. UIView animations - basic, chaining, timing and options
    2. CALayer animations - implicit, explicit, CABasicAnimation
  5. Summary
  6. Advanced stuff and where to go

 

Introduction

Core Animation is a framework developed by Apple first for the Mac since OS X 10.5 and iOS since the beginning. It was first shown to public on the WWDC 2006 and is underlying the UIKit. Its main purpose is to create animated user interfaces with ease and without have the programmer to write much code to do so. Since it is GPU accelerated and the animations are performed in a different CPU threat it does not slow down your app too much.

Given that Core Animation is underlying the UIKit, every app that uses the standard UI of Apple´s iOS is making use of Core Animation internally. Every time you see an animation like when fading from one view to another that is done using Core Animation.

 

Overview

There are 3 types of animations we will cover in this tutorial:

  • [UIView animateWithDuration:duration delay:delay options:options animations:^{ /* animations here */ } completion:^(BOOL finished) { /* completion handler here */ }]
    • The method is also available with only duration and animations OR duration, animations and completion handler
    • The old style doing UIView animations was writing something: [UIView beginAnimations:@"anim" context:nil]; /* your animations stuff here */; [UIView commitAnimations];
  • CALayer implicit animations: CALayer *layer = /* get or create a layer */; layer.opacity = 0; which will animated the opacity from the current value to 0 using default timing and options
  • CALayer explicit animations: CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@”path”]; /* animation customizing */; [layer addAnimation:anim forKey:@"key"]; which will animate one property from some value to another

 

UIView geometry and animatable properties

A UIView is basically a rectangular area on the screen which can has subviews inside itself creating more or less complex view hierarchy. The parent of the topmost UIView is a UIWindow. A UIView is thin wrapper around a CALayer, at least on iOS, which we will cover later. On iOS only layer-backed views exist, meaning that every UIView has a CALayer as pixel backing storage. On Mac OS there are also views that do not contain of a CALayer of any kind.

Every UIView consists of three basic geometric properties: frame, bounds and center. And one more complex one: transform, which lets you apply rotation, scaling, translating. The origin of the view is in the top-left corner and the x-axis points right and the y-axis down. The values of x reach form 0 to width, y from 0 to height respectively.

Origin and orientation of coordinate system

Core graphics

To be able to manipulate the appearance of any object on screen, there are five data types provided by Core Graphics (CG) which are important to know:

  • CGFloat - just a float under a new name to match the naming convention prepending "CG" before any Core Graphics type
  • CGPoint - struct, containing a CGFloat x and a second CGFloat y
  • CGSize - struct, containing two CGFloats width and height
  • CGRect - strcut, containing a CGPoint origin and and a CGSize size
  • CGAffineTransform - struct, containing six CGFloats which let specify rotation, scaling and translation, the floats represent the important values in a 4x4 matrix which defines translation. Only six instead of sixteen are specified since only 2D transformations are available, rotating around z, scaling and translating x and y

For every struct there are helper methods which make it easier to create an instance of the struct: CGRectMake(x,y,w,h), CGPointMake(x,y), CGSizeMake(w,h) and CGAffineTransform***(...). To be able to log the structs for debugging purposes simply write NSLog(@"%@", NSStringFromCG***(<your struct instancehere>); and choose the right method corresponding to the type of data you want to log.

If at some point you need to set the color of an object which wants you to specify a CGColorRef for coloring you can access the CGColor property every UIColor as to get an CGColorRef from any given UIColor.

The frame property

The frame of a UIView is a CGRect and specifies the position and the size of the view, it is a bounding box of the view. If and only if the view is transformed that bounding box actually differs form the drawable are on the screen. The origin and the size are in the superview´s  coordinate system. If you have a view which is scaled by 2 and add an subview at (50,50) with size (100,40) then the added view will on screen be on the doubled position and have the doubled size. ??? 

 

The bounds property

The bound property is a CGRect as well, but in contrast to the frame it represents the drawable are on the screen, which differs from the frame if and only if you assign any transform to the transform property except the identity. The property itself is not affected by the transform, just what you see on the screen combining the bounds and the transform changes. Its values are in the coordinate system of the frame, meaning that (0,0) represents, before applying transform, the origin as well

The center property

As you would expect the center is a CGPoint specifying the center of the view, more precise the frame of the view in its superview. Basically the center is calculated by center = frame.origin + frame.size / 2.

The three combined

Very important to understand is that the three properties are connected and changing one will change the others as needed. Therefore the equation for the center can also be done the other way around by setting the center and let Objective-C calculate the matching frame to the new center.

In addition to previously explained properties there are a few more animatable ones:

  • a float alpha, which is the opacity of the view, between 0 (not visible) and 1 (fully opaque)
  • a UIColor backgroundColor, the background color of the view.

kasdoasnd