IOS Coreanimation Detailed (i) animation about layer

Before because the project needs also wrote some animation, but the knowledge is not systematic, very scattered. This time, while the project completed the air raids, to follow the footsteps of the great God of the system to summarize the core animation in iOS knowledge points.

Original Blog Address: http://blog.csdn.net/column/details/huangwenchen-ios-sdk.html

This article mainly from the coreanimation layer angle to explain the animation, I want to calayer from the perspective of better understanding, follow-up will have a second from uikit UIView angle to explain the animation, the third explanation uidynamicanimation, In the third chapter I will talk about the animation of Uiviewcontroller switch.

This article mainly covers four parts

1. The underlying animation will talk about the time function and some key attributes

2. Keyframe-based animations talk about animations that run along a specified path

3. Animation group multiple animations grouped together to form complex animations

4. A brief talk about the animation agent

Why should I design an animation

Animations provide a gradual way to express changes, using animations to avoid various animation mutations, causing confusion for users.

In iOS, using coreanimation as long as you specify the whole state or keyframe state, coreanimation will efficiently create a motion tween for us.

Two three kinds of animations from Calayer's point of view

First not familiar with Calayer's classmates to see the first two articles of the Calayer content, which is the basis of coreanimation. Here I repeat the two kinds of calayer tree.
Presentation tree-corresponds to the properties of the Calayer during the animation
The Model tree-corresponds to the actual properties of the Calayer.
Two tree types can be accessed by using-[calayer Presentationlayer] and-[calayer Modellayer]
The process of animating is actually modifying the presentation Tree

2.1 Basics of Animation

The first simple animation, I want ImageView to move 100 of the distance to the right, move the way easeinout (acceleration start, deceleration end).

The code is as follows, usually in two ways to affect the animation

Cabasicanimation *animation =[cabasicanimation animation]; Animation.keypath=@"position.x";//KVC Way to access the propertyAnimation.fromvalue = @ (self.imageview.layer.position.x);//the value at which the property startsAnimation.tovalue = @ (self.imageview.layer.position.x + -);//the end value of the propertyAnimation.duration =1;//the time it takes to complete an animation//set the way animations are madeAnimation.timingfunction =[Camediatimingfunction functionwithname:kcamediatimingfunctioneaseout]; [Self.imageView.layer addanimation:animation Forkey:@"Basic"];

Through Fromvalue and Tovalue is a way, of course, can also be byvalue by the way, byvalue in the initial value of adding byvalue changes, the following code can also be implemented by the above animation

Cabasicanimation *animation =[cabasicanimation animation]; Animation.keypath=@"position.x";//KVC Way to access the property//Animation.fromvalue = @ (self.imageview.layer.position.x);//the value at which the property starts//Animation.tovalue = @ (self.imageview.layer.position.x +);//the end value of the propertyAnimation.byvalue = @ ( -); Animation.duration=1;//the time it takes to complete an animation//set the way animations are madeAnimation.timingfunction =[Camediatimingfunction functionwithname:kcamediatimingfunctioneaseout]; [Self.imageView.layer addanimation:animation Forkey:@"Basic"];

However, the end will find that imageview back to the same place. This is because in the process of animation, we modify the presentation Tree and do not actually modify the properties of Calayer. There are usually two ways to make an animation stop at the end of a position,

(1) Modifying properties
The code is as follows

Cabasicanimation * Animation =[cabasicanimation animation]; Animation.keypath=@"position.x"; Animation.fromvalue=@ (self.imageview.layer.position.x); Animation.tovalue= @ (self.imageview.layer.position.x + -); Animation.duration=1; Animation.timingfunction=[Camediatimingfunction functionwithname:kcamediatimingfunctioneaseineaseout]; [Self.imageview.layer addanimation:animation Forkey:@"Basic"]; Self.imageview.layer.position= Cgpointmake (self.imageview.layer.position.x+ -, SELF.IMAGEVIEW.LAYER.POSITION.Y);

(2) Set the animation to stop at the end of the position

Cabasicanimation * Animation =[cabasicanimation animation]; Animation.keypath=@"position.x"; Animation.fromvalue=@ (self.imageview.layer.position.x); Animation.tovalue= @ (self.imageview.layer.position.x + -); Animation.duration=1; Animation.timingfunction=[Camediatimingfunction functionwithname:kcamediatimingfunctioneaseineaseout]; Animation.removedoncompletion= NO;//End of animation disable DeleteAnimation.fillmode = Kcafillmodeforwards;//stop at the end of the animation[Self.imageview.layer addanimation:animation Forkey:@"Basic"];

The former is generally used because the animation tends to end up as the actual property changes.

We'll explain the time function here.
The time function determines how the animation executes, the time function determines the mathematical model of the animation, such as the speed of the best not to have a mutation, the system provides the time function has the following several

NSString *constkcamediatimingfunctionlinear; linear
NSString *constkcamediatimingfunctioneasein; accelerate entry
NSString *constkcamediatimingfunctioneaseout, deceleration stop
Nsstring*constkcamediatimingfunctioneaseineaseout, accelerating into a deceleration stop, this is commonly used
NSString *constkcamediatimingfunctiondefault; default
Of course, the time function supports customization, using the following function
Functionwithcontrolpoints::::
The 4 points of this function determine a three-dimensional Bezier curve to determine the time function. There's no further explanation here.
Finally, this is especially important when passing a Caanimation object or subclass to a layer, passing a copy

2.2 Keyframe-based animations
Here is an animation based on a keyframe-created jitter that creates an animation at a point-in-time position

Cakeyframeanimation * Animation =[cakeyframeanimation animation]; Animation.keypath=@"position.x"; Nsinteger Initalpositionx=self.imageview.layer.position.x; Animation.values=@[@ (Initalpositionx), @ (Initalpositionx+Ten), @ (Initalpositionx-Ten), @ (Initalpositionx+Ten), @ (Initalpositionx)]; Animation.keytimes= @[                           @(0),                           @(1/6.0),                           @(3/6.0),                           @(5/6.0),                           @(1)]; [Self.imageView.layer addanimation:animation Forkey:@"Keyframe"];

Of course, keyframe-based animations support motion along the path, and you can set the time function to determine how the motion is
For example, create a more complex motion, first moving to (200,200), then along the center of the point, rotate the half turn counterclockwise, and finally stop at the end position.
During the animation, the ImageView along the path

Cakeyframeanimation * Animation =[cakeyframeanimation animation]; Animation.keypath=@"position"; //Create PathCgmutablepathref Mutablepath =cgpathcreatemutable ();    Cgpathmovetopoint (Mutablepath, nil,self.imageview.layer.position.x, SELF.IMAGEVIEW.LAYER.POSITION.Y); Cgpathaddlinetopoint (Mutablepath,nil, $, $); Cgpathaddarc (Mutablepath, Nil, $, $, -,0, M_pi,yes); //Set PathAnimation.path =Mutablepath; Animation.duration=4.0; Animation.rotationmode=Kcaanimationrotateauto; Animation.removedoncompletion= NO;//End of animation disable DeleteAnimation.fillmode = Kcafillmodeforwards;//stop at the end of the animation[Self.imageView.layer addanimation:animation Forkey:@"pathanimation"];

2.3 Animation Group
The so-called animation group is the combination of several animations together, and then executed together, usually complex animation by the animation group to achieve.
For example: Along the path of the previous example, the motion is the same as the transparency gradient.

Cakeyframeanimation * Pathanimation =[cakeyframeanimation animation]; Pathanimation.keypath=@"position"; //Create PathCgmutablepathref Mutablepath =cgpathcreatemutable ();    Cgpathmovetopoint (Mutablepath, nil,self.imageview.layer.position.x, SELF.IMAGEVIEW.LAYER.POSITION.Y); Cgpathaddlinetopoint (Mutablepath,nil, $, $); Cgpathaddarc (Mutablepath, Nil, $, $, -,0, M_pi,yes); //Set PathPathanimation.path =Mutablepath; Pathanimation.rotationmode=Kcaanimationrotateauto; [Self.imageview.layer addanimation:pathanimation Forkey:@"pathanimation"]; //Transparency ChangesCakeyframeanimation * Opacityanimation =[cakeyframeanimation animation]; Opacityanimation.keypath=@"Opacity"; Opacityanimation.values= @[@(1.0),                         @(0.5),                         @(0.0),                         @(0.5),                         @(1.0)]; Opacityanimation.calculationmode=kcaanimationpaced; [Self.imageview.layer addanimation:opacityanimation Forkey:@"opacityanination"]; //Configure animation groupsCaanimationgroup * Animationgroup =[[Caanimationgroup alloc] init]; Animationgroup.animations=@[pathanimation,opacityanimation]; Animationgroup.duration=4.0; Animationgroup.removedoncompletion=NO; Animationgroup.fillmode=kcafillmodebackwards; [Self.imageview.layer addanimation:animationgroup Forkey:@"groupanimation"];

(iii) animation of the agent
You can listen for events where the animation starts and ends by setting up an agent
Listen to two functions by setting delegate
Animationdidstart: (caanimation *) Anim
Animationdidstop: (caanimation *) Anim finished: (BOOL) flag
Flag here determines whether the animation is executed

IOS Coreanimation Detailed (i) animation about layer