iOS development UI chapter-core animation (Keyframe animation)

Transferred from: http://www.cnblogs.com/wendingding/p/3801330.html

iOS development UI chapter-core animation (Keyframe animation)

First, Brief introduction

is a subclass of Capropertyanimation, the difference with cabasicanimation is that cabasicanimation can only change from one numeric value (Fromvalue) to another (Tovalue), And Cakeyframeanimation will use a nsarray to save these values

Attribute parsing:

Values: This is the Nsarray object. The elements inside are called "keyframes" (keyframe). The animated object displays each keyframe in the values array in the specified time (duration), in turn

Path: You can set a cgpathref\cgmutablepathref so that the layer moves along the path. Path only works on Calayer's anchorpoint and position. If you set the path, the values will be ignored

Keytimes: You can specify a corresponding point in time for the corresponding keyframe, and each time value in the range from 0 through 1.0,keytimes corresponds to each frame in values. When the keytimes is not set, the time of each keyframe is equally divided.

Description: Cabasicanimation can be viewed as a maximum of only 2 keyframes cakeyframeanimation

Second, code example

The first way:

Code:

 1//2//YYVIEWCONTROLLER.M 3//10-core Animation (Keyframe animation 1) 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 (weak, nonatomic) Iboutlet UIView * customview;13 @end15 @implementation YYViewController17-(void) Touchesbegan: (Nsset *) touches withevent: (     Uievent *) event20 {21//1. Create a core animation of the cakeyframeanimation *keyanima=[cakeyframeanimation animation];23//Pan 24  [email protected] "position"; 25//1.1 tell the system what to do animation. Nsvalue *value1=[nsvalue Valuewithcgpoint:cgpointmake (100, ];27 nsvalue *value2=[nsvalue valuewithcgpoint:cgpointmake (max.)];28 Nsvalue *value3=[nsvalue ValueWithCG Point:cgpointmake (];29) nsvalue *value4=[nsvalue valuewithcgpoint:cgpointmake (+)];30 NSValue *value 5=[nsvalue Valuewithcgpoint:cgpointmake (];31) [email protected][value1,value2,value3,value4,value5]; 32//1.2 After you set the animation to finish, do not delete the animation keyanima.removedoncompletion=no;34//1.3 settings Save the latest state of the animation Keyanima.fillmode=kcafillmodeforwar Ds;36//1.4 Set the time of animation execution keyanima.duration=4.0;38//1.5 set the rhythm of the animation keyanima.timingfunction=[camediatimingfunct Ion FUNCTIONWITHNAME:KCAMEDIATIMINGFUNCTIONEASEINEASEOUT];40 41//Set agent, start-end keyanima.delegate=self;43/ /2. Add core animation [Self.customView.layer Addanimation:keyanima forkey:nil];45}46-(void) Animationdidstart: (caanimation *) Anim48 {NSLog (@ "Start animation"),}51-(void) Animationdidstop: (Caanimation *) Anim finished: (BOOL) flag53 {NSLog ( @ "End animation");}56 @end

Description: This project dragged a view into the storyboard and was associated with the custom in the controller.

Effects and printing results:

Add: Set the rhythm of the animation

The second way (using path) is to have the layer move around the specified path (draw a circle):

Code:

 1 #import "YYViewController.h" 2 3 @interface Yyviewcontroller () 4 @property (weak, nonatomic) Iboutlet UIView *CUSTOMV Iew; 5 6 @end 7 8 @implementation Yyviewcontroller 9 ten-(void) Touchesbegan: (Nsset *) touches withevent: (uievent *) event12 {13//1. Creating a core animation cakeyframeanimation *keyanima=[cakeyframeanimation animation];15//pan [email prote CTED] "position"; 17//1.1 tell the system what to do animation 18//Create a path cgmutablepathref path=cgpathcreatemutable (); 20//Set the path of a circle Cgpathaddellipseinrect (Path, NULL, CGRectMake (), keyanima.path=path;23 24//with creat E must have release25 cgpathrelease (path); 26//1.2 After you set the animation to finish, do not delete the animation keyanima.removedoncompletion=no;28//1.3 settings Save The latest state of the animation keyanima.fillmode=kcafillmodeforwards;30//1.4 set the animation execution time to keyanima.duration=5.0;32//1.5 set the rhythm of the animation 3 3 Keyanima.timingfunction=[camediatimingfunction functionwithname:kcamediatimingfunctioneaseineaseout];34 35/ /Set agent, start-end Keyanima.delegate=self;37//2. Add Core animation [Self.customView.layer Addanimation:keyanima forkey:nil];39}40-(void) an Imationdidstart: (caanimation *) anim42 {NSLog (@ "Start animation"),}45-(void) Animationdidstop: (caanimation *) Anim Finishe D: (BOOL) flag47 {NSLog (@ "End animation");}50 @end

Description: The Path property allows the layer to move over the specified trajectory.

Stop Animation:

 1 #import "YYViewController.h" 2 3 @interface Yyviewcontroller () 4 @property (weak, nonatomic) Iboutlet UIView *CUSTOMV Iew; 5-(Ibaction) Stoponclick: (UIButton *) sender; 6 7 @end 8 9 @implementation YYViewController10-(void) Touchesbegan: (Nsset *) touches withevent: (uievent *) event13 {14//1. Creating a core animation cakeyframeanimation *keyanima=[cakeyframeanimation animation];16//pan [email prote CTED] "position"; 18//1.1 tell the system what to do animation 19//Create a path cgmutablepathref path=cgpathcreatemutable (); 21//Set the path of a circle Cgpathaddellipseinrect (Path, NULL, CGRectMake (keyanima.path=path;24, +, +)); 25//Creat E must have release26 cgpathrelease (path); 27//1.2 After you set the animation to finish, do not delete the animation. keyanima.removedoncompletion=no;29//1.3 Settings Save The latest state of the animation keyanima.fillmode=kcafillmodeforwards;31//1.4 set the animation execution time by keyanima.duration=5.0;33//1.5 set the rhythm of the animation 3 4 Keyanima.timingfunction=[camediatimingfunction Functionwithname:kcamediatimingfunctioneasEINEASEOUT];35 36//2. Add Core Animation PNs [Self.customView.layer addanimation:keyanima forkey:@ "wendingding"];38}39 40- (ibaction) Stoponclick: (UIButton *) Sender {41//Stop Self.customView.layer on the name marked wendingding [Self.customView.lay Er removeanimationforkey:@ "wendingding"];43}44 @end

Click Stop Animation, inside the program will call [Self.customView.layer removeanimationforkey:@ "wendingding"]; Stop the animation on Self.customView.layer that has a name labeled Wendingding.

Third, the icon jitter

code example:

 1//2//YYVIEWCONTROLLER.M 3//12-icon jitter 4//5//Created by Apple on 14-6-21. 6//Copyright (c) 2014 itcase. All rights reserved. 7//8 9 #import "YYViewController.h" #define Angle2radian (angle) (angle)/180.0*m_pi @interface Yyviewcontrolle  R () @property (weak, nonatomic) Iboutlet uiimageview *iconview;14 @end16 @implementation YYViewController19 20 -(void) Touchesbegan: (Nsset *) touches withevent: (uievent *) event21 {22//1. Creating Core animations Cakeyframeanimation *keyanima= [Cakeyframeanimation animation];24 [email protected] "transform.rotation"; 25//Set Animation time: + keyanima.duration= 0.1;27//Set icon jitter radians 28//convert degrees to radians degrees/180*m_pi29 [email protected][@ (-angle2radian (4)), @ (Angle2radian (4)), @ ( -angle2radian (4))];30//Set the number of repetitions of the animation (set to maximum) keyanima.repeatcount=maxfloat;32 KEYANIMA.FILLMODE=KCAFILLM Odeforwards;34 keyanima.removedoncompletion=no;35//2. Add animation [Self.iconView.layer Addanimation:keyanima Forkey : nil];Panax Notoginseng}38 @end 

Note: The icon is deflected to the right by one radian (4), creating a visual effect of dithering.

Program Interface:

iOS development UI chapter-core animation (Keyframe animation)