iOS development UI chapter-core animation (basic animation)

iOS development UI chapter-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:

 1//2//YYVIEWCONTROLLER.M 3//07-Core animation (basic animation) 4//5//Created by Apple on 14-6-21. 6//Copyright (c) 2014 itcase. All rights reserved. 7//8 9 #import "YYViewController.h" @interface Yyviewcontroller () @property (nonatomic,strong) Calayer *mylayer;1 3 @end14 @implementation YYViewController16-(void) viewDidLoad18 {[Super viewdidload];20 21///Create Laye R22 calayer *mylayer=[calayer layer];23//Set the properties of layer (0, 0, +), and Mylayer.bounds=cgrectmake. Backgroundcolor=[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 do you move the layer from? Anima.fromvalue=[nsvalue valuewithcgpoint:cgpointmake (0, 0)];45 Anima.tovalue=[nsvalue valueWith Cgpoint:cgpointmake (200, 300)];46 47//1.2 Set animation do not delete animation after completion of anima.removedoncompletion=no;49//1.3 settings Save the latest animation Status Anima.fillmode=kcafillmodeforwards;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:

 1//2//YYVIEWCONTROLLER.M 3//08-Core Animation Pan 4//5//Created by Apple on 14-6-21. 6//Copyright (c) 2014 itcase. All rights reserved. 7//8 9 #import "YYViewController.h" @interface Yyviewcontroller () @property (nonatomic,strong) Calayer *mylayer;1 3 @end14 @implementation YYViewController16-(void) viewDidLoad18 {[Super viewdidload];20 21///Create Laye R22 calayer *mylayer=[calayer layer];23//Set properties of layer (0, 0, max); mylayer.bounds=cgrectmake . Backgroundcolor=[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 anima.duration=2.0;40//1.2 set animationDo not delete animation after line anima.removedoncompletion=no;42//1.3 settings Save the latest state of the animation anima.fillmode=kcafillmodeforwards;44//1.4 Modify properties, perform animations Anima.tovalue=[nsvalue valuewithcgrect:cgrectmake (0, 0, 200, 200)];46//2. Adding animations to layer47 [Self.mylay Er addanimation:anima forkey:nil];48}49 @end

Implementation results:

Four, rotate the animation

code example:

 1//2//YYVIEWCONTROLLER.M 3//09-Core Animation Rotation 4//5//Created by Apple on 14-6-21. 6//Copyright (c) 2014 itcase. All rights reserved. 7//8 9 #import "YYViewController.h" @interface Yyviewcontroller () @property (nonatomic,strong) Calayer *mylayer;1      3 @end14 @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.ba Ckgroundcolor=[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 Anima.tovalue=[nsvalue valuewithcatransform3d:catransform3dmakerotation (M_pi_2+m_pi_4, 1, 1, 0)];41//1.3 settings      Animations are not deleted after the animation is executed anima.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.

iOS development UI chapter-core animation (basic animation)