Core Animation (Basic animation)

Core Animation (Basic animation)

First, Brief introduction

Subclass of Capropertyanimation

Attribute parsing:

Fromvalue:keypath the initial value of the corresponding property

Tovalue:keypath the end value of the corresponding property

As the animation progresses, the value of the keypath corresponding property is gradually changed from Fromvalue to Tovalue during the duration of the duration length.

If Fillmode=kcafillmodeforwards and Removedoncomletion=no are complete, the layer remains displayed after the animation is executed. But in essence, the property value of the layer is still the initial value before the animation is executed, and it is not really changed.

For example, Calayer's position initial value is (0,0), Cabasicanimation Fromvalue is (10,10), Tovalue is (100,100), although the animation after the completion of the layer remains at (100,100) this position, The position of the physical layer is still for (0,0)

Second, translation animation

code example:

 8 9 #import "YYViewController.h" @interface Yyviewcontroller () @property (nonatomic,strong) calayer *mylayer;13 @e     Nd14 @implementation YYViewController16-(void) viewDidLoad18 {[Super viewdidload];20 21//Create Layer22 Calayer *mylayer=[calayer layer];23//Set the properties of the layer Mylayer.bounds=cgrectmake (0, 0,.); Mylayer.back Groundcolor=[uicolor Yellowcolor]. Cgcolor;26 mylayer.position=cgpointmake (0, 0); Mylayer.anchorpoint=cgpointmake Mylayer.cornerradi us=20;29//Add Layer30 [Self.view.layer addsublayer:mylayer];31 self.mylayer=mylayer;32}33 34//animate (Base animation) 35-( void) Touchesbegan: (Nsset *) touches withevent: (uievent *) event36 {37//1. Create core animation//Cabasicanimation *anima=[ca Basicanimation animationwithkeypath:<# (NSString *) #>]39 cabasicanimation *anima=[cabasicanimation animation]; 40 41//1.1 tells the system what kind of animation to perform [email protected] "position"; 43//set by animation, where to move the layer from where to Anima.Fromvalue=[nsvalue valuewithcgpoint:cgpointmake (0, 0)];45 Anima.tovalue=[nsvalue valuewithcgpoint:cgpointmake (200, 300)];46 47//1.2 Set animation does not delete animation after execution is complete anima.removedoncompletion=no;49//1.3 settings Save the latest state of animation anima.fillmode=k CAFILLMODEFORWARDS;51 52//2. Add core animation to layer53 [Self.mylayer Addanimation:anima forkey:nil];54 55}
@end

Code Description:

The KeyPath set in line 42nd is @ "position", indicating that the Calayer position property is to be modified, that is, the panning animation is performed

The 44th, 45 line, where the property receives the parameters of the type of the ID, so it is not possible to directly use the struct type cgpoint, but to wrap it into a Nsvalue object before use.

By default, when the animation finishes, the animation is automatically removed from the Calayer and the Calayer is returned to its original state. In order to maintain the state of the animation after the execution, you can add 48th, 50 lines of code

The difference between Byvalue and Tovalue, the former is how much to increase in the current position, the latter is to the specified position.

Execution effect:

Set Agent: Set the animation agent, you can listen to the animation of the execution process, where the controller is set as the agent.

code example:

 1 #import "YYViewController.h" 2 3 @interface Yyviewcontroller () 4 @property (Nonatomic,strong) Calayer *mylayer; 5 @end 6 7 @implementation Yyviewcontroller 8 9-(void) VIEWDIDLOAD10 {Each [super viewdidload];12 13//Create Laye R14 calayer *mylayer=[calayer layer];15//Set properties for layer Mylayer.bounds=cgrectmake (0, 0, N); Backgroundcolor=[uicolor Yellowcolor]. Cgcolor;18 mylayer.position=cgpointmake (0, 0); Mylayer.cornerradi, Mylayer.anchorpoint=cgpointmake US=20;21//Add layer22 [Self.view.layer addsublayer:mylayer];23 self.mylayer=mylayer;24}25 26//animate (Base animation) 27-( void) Touchesbegan: (Nsset *) touches withevent: (uievent *) event28 {29//1. Creating a core animation//Cabasicanimation *anima=[ca Basicanimation animationwithkeypath:<# (NSString *) #>]31 cabasicanimation *anima=[cabasicanimation animation]; 32 33//1.1 tells the system what kind of animation to perform [email protected] "position"; 35//set Where to move the layer from where to by animation, and where to place it Anima.froMvalue=[nsvalue valuewithcgpoint:cgpointmake (0, 0)];37 Anima.tovalue=[nsvalue valuewithcgpoint:cgpointmake (200, 300 )];38 39//1.2 Set animation does not delete animation after execution is complete anima.removedoncompletion=no;41//1.3 setting the latest state of the Save animation ANIMA.FILLMODE=KCAF     illmodeforwards;43 anima.delegate=self;44//Print NSString *str=nsstringfromcgpoint (self.myLayer.position); 46 NSLog (@ "Pre-execution:%@", str); 47 48//2. Add core animation to layer49 [Self.mylayer addanimation:anima forkey:nil];50 Wuyi}52-(v OID) Animationdidstart: (caanimation *) anim54 {NSLog (@ "Start animation");}57 (void) Animationdidstop: (Caanimation *) ANI M finished: (BOOL) flag59 {60//animation completed, print after execution of position value NSString *str=nsstringfromcgpoint (self.myLayer.position); NSLog (@ "After execution:%@", str),}64 @end

Prints the property value of the position, validates the property value of the layer or the initial value {50,50} before the animation is executed, and does not actually change to {200,300}.

Three, zoom animation

Example code to implement scaled animations:

 8 9 #import "YYViewController.h" @interface Yyviewcontroller () @property (nonatomic,strong) calayer *mylayer;13 @e     Nd14 @implementation YYViewController16-(void) viewDidLoad18 {[Super viewdidload];20 21//Create Layer22 Calayer *mylayer=[calayer layer];23//Set the properties of the layer Mylayer.bounds=cgrectmake (0, 0,.); Mylayer.bac Kgroundcolor=[uicolor Yellowcolor]. Cgcolor;26 mylayer.position=cgpointmake (0, 0); Mylayer.anchorpoint=cgpointmake Mylayer.cornerradi us=40;29//Add Layer30 [Self.view.layer addsublayer:mylayer];31 self.mylayer=mylayer;32}33-(void) Touchesbeg AN: (Nsset *) touches withevent: (uievent *) Event35 {36//1. Create animation PNS cabasicanimation *anima=[cabasicanimation Animatio nwithkeypath:@ "Bounds"];38//1.1 set Animation execution time of anima.duration=2.0;40//1.2 set animation does not delete animation after execution is complete anima.removedoncomp letion=no;42//1.3 Settings Save the latest state of animation anima.fillmode=kcafillmodeforwards;44//1.4 Modify properties, perform animation anima.toValue=[nsvalue valuewithcgrect:cgrectmake (0, 0, 200, 200)];46//2. Add animation to layer47 [Self.mylayer addanimation:anima fo rkey:nil];48}49 @end

Implementation results:

Four, rotate the animation

code example:

 8 9 #import "YYViewController.h" @interface Yyviewcontroller () @property (nonatomic,strong) calayer *mylayer;13 @e     Nd14 @implementation YYViewController16-(void) ViewDidLoad17 {[Super viewdidload];19 20//Create Layer21 Calayer *mylayer=[calayer layer];22//Set the properties of the layer to Mylayer.bounds=cgrectmake (0, 0,.); mylayer.backgr Oundcolor=[uicolor Yellowcolor]. Cgcolor;25 mylayer.position=cgpointmake (0, 0), Mylayer.cornerradi, Mylayer.anchorpoint=cgpointmake US=40;28//Add layer29 [Self.view.layer addsublayer:mylayer];30 self.mylayer=mylayer;31}32-(void) Touchesbeg AN: (Nsset *) touches withevent: (uievent *) Event34 {35//1. Creating animations cabasicanimation *anima=[cabasicanimation Animatio nwithkeypath:@ "Transform"];37//1.1 set Animation execution time anima.duration=2.0;39//1.2 modify properties, perform animation, Max Anima.tovalue=[nsvalu E valuewithcatransform3d:catransform3dmakerotation (M_pi_2+m_pi_4, 1, 1, 0)];41//1.3 set animation does not delete animation after execution is complete animaThe. removedoncompletion=no;43//1.4 settings Save the latest state of animation anima.fillmode=kcafillmodeforwards;45 46//2. Add animation to Layer47 [Self.mylayer Addanimation:anima forkey:nil];48}49 @end

Implementation results:

Tip: If you want the graphic to rotate in 2D, simply change the value of the catransform3dmakerotation in the z direction to 1.

Anima.tovalue=[nsvalue valuewithcatransform3d:catransform3dmakerotation (M_pi_2+m_pi_4, 1, 1, 0)];

Iv. Supplementary

Settings can be made by transform (KVC).

code example (panning):

 1 #import "YYViewController.h" 2 3 @interface Yyviewcontroller () 4 @property (Nonatomic,strong) Calayer *mylayer;      5 @end 6 7 @implementation Yyviewcontroller 8-(void) Viewdidload 9 {Ten [Super Viewdidload];11 12//Create Layer13 Calayer *mylayer=[calayer layer];14//Set the properties of the layer Mylayer.bounds=cgrectmake (0, 0,.); mylayer.ba Ckgroundcolor=[uicolor Yellowcolor]. Cgcolor;17 mylayer.position=cgpointmake (0, 0); Mylayer.cornerradi. US=40;20//Add layer21 [Self.view.layer addsublayer:mylayer];22 self.mylayer=mylayer;23}24-(void) Touchesbeg AN: (Nsset *) touches withevent: (uievent *) event26 {27//1. Creating animations cabasicanimation *anima=[cabasicanimation Animatio     n];29 [email protected] "transform"; 30//1.1 set Animation execution time anima.duration=2.0;32//1.2 modify properties, perform animations 33 34 Anima.tovalue=[nsvalue valuewithcatransform3d:catransform3dmaketranslation (0, 100, 1)];35//1.3 set animation do not delete animation after completion 36    anima.removedoncompletion=no;37//1.4 Settings Save the latest state of the animation anima.fillmode=kcafillmodeforwards;39 40//2. Add animation to L ayer41 [Self.mylayer Addanimation:anima forkey:nil];42}

Implementation results:

The drawn graphic moves 100 units in the direction of Y.

Core Animation (Basic animation)