iOS Animation(1): CABasicAnimation and CAKeyFrameAnimation

发表于   |   分类于   |  

Animation is very important in iOS applications, it can improve user experience of our app, make apps looks cool and beautiful. In iOS SDK there are two classes, CABasciAnimation and CAKeyframeAnimation, which can help us do beautiful and complicated animations in not complicated ways. This article I will summarize my current understanding of these two classes, and as work goes on, I will update this article to cover more aspects of these two classes.

Many properties of UIView and CALayer is animatable, which means when you change the value of these properties, some kind of animation will automatically be triggered. For example, if you change the position of a CALayer object, you can see the layer moves from the original position to current position. So for simple animations, such as fade, slide, scale you can just change the respective property of the layer, then the animation will occur. When we want to do more complicated animations, we shoule turn to CABasicAnimation and CAKeyframeAnimation.

we all know that, animation is composed of frames. For one second animation in ios,there are 60 frames. CABasicAnimation only allows us to set the first and the last frames of the animation, and this class will automatically interpolate all the other frames between the two key frames. Let’s look at the code below:

1
2
3
4
5
6

CABasicAnimation* moveAnimation = [CABasicAnimation animationWithKeyPath@"position"];
moveAnimation.fromValue = [NSValue valueWithCGPoint:point1];
moveAnimation.toValue = [NSValue valueWithCGPoint:point2];
[layer addAnimation:moveAnimation withKet:@"moveAnim"];

With the code above, we can see, layer moves from point1 to point2, we only set the start position point1 and end position point2, the CABasicAnimation class automatically caculates all the positions between start and end points using linear function. But usually we want to control the speed of the movement, that is we want use other functions to do interpolation, timingFunction of CABasicAnimation provides us with the free. Timingfunction allows us to use Bézier curve to fit the function, for more information you can refer to iOS document.

Different from CABasicAnimation, CAKeyframeAnimation allows us to give multiple keyframes, not just two, and it also provides us some properties such as values, path to set the value at each keyframe, keytimes to set time for each value in values and path property, timingFunctions to provide calculation function for each keyframe segment. Compared to CABasicAnimation, CAKeyframeAnimation class can do more complicated animations.Later I will give some examples of animations, you will see how easy to use iOS to create good animation.