Example explains the creation of the basic animation for IOS application UI Development _ios

First, a brief introduction

Capropertyanimation of the child class

Attribute resolution:

Fromvalue:keypath the corresponding property's initial value

Tovalue:keypath the end value of the corresponding property

As the animation progresses, the value of the corresponding property keypath gradually from Fromvalue to tovalue in the duration of duration length.

If Fillmode=kcafillmodeforwards and removedoncomletion=no, the layer retains its state after the animation has finished executing. But in essence, the property value of the layer is the initial value of the animation before it is executed, and it is not really changed.

For example, Calayer's position initial value is (0,0), Cabasicanimation Fromvalue is (10,10), and Tovalue is (100,100), although the layer remains at (100,100) This position after the animation is finished. Essentially the position of the layer is still (0,0)

Two, translation animation

code example:

Copy Code code as follows:

//
Yyviewcontroller.m
07-Core Animation (basic animation)
//
Created by Apple on 14-6-21.
Copyright (c) 2014 itcase. All rights reserved.
//

#import "YYViewController.h"

@interface Yyviewcontroller ()
@property (Nonatomic,strong) Calayer *mylayer;
@end

Copy Code code as follows:

@implementation Yyviewcontroller

-(void) viewdidload
{
    [super Viewdidload];
   
    //Create layer
    calayer *mylayer=[calayer layer];
   //Set layer Properties
    mylayer.bounds=cgrectmake (0, 0, 50, 80);
    Mylayer.backgroundcolor=[uicolor Yellowcolor]. Cgcolor;
    Mylayer.position=cgpointmake (50, 50);
    mylayer.anchorpoint=cgpointmake (0, 0);
    mylayer.cornerradius=20;
   //Add layer
    [Self.view.layer addsublayer:mylayer];
     Self.mylayer=mylayer;
}

//Set animation (underlying animation)
-(void) Touchesbegan: (Nsset *) touches withevent: (Uievent *) event
{
   //1. Create a core animation
   //    cabasicanimation *anima=[cabasicanimation animationwithkeypath: <# (NSString *) #>]
    cabasicanimation *anima=[cabasicanimation animation];
    
   //1.1 tells the system what animation to perform
    anima.keypath=@ "position";
    //settings move the layer from where to where, by animating
    Anima.fromvalue=[nsvalue Valuewithcgpoint:cgpointmake ( 0, 0)];
    anima.tovalue=[nsvalue Valuewithcgpoint:cgpointmake (200, 300)];
   
   //1.2 The animation is not deleted after the animation is finished
    Anima.removedoncompletion=no;
   //1.3 settings to save the latest state of the animation
    anima.fillmode=kcafillmodeforwards

2. Add core animation to layer
[Self.mylayer Addanimation:anima Forkey:nil];

}
@end

Code Description:

The 42nd line set KeyPath is @ "position", which means that the position property of the Calayer is to be modified, that is, the translation animation is performed

44th, 45 lines, where the attribute receives the parameter of the type of time ID, so it is not possible to use cgpoint this type of struct directly, but to wrap it as a Nsvalue object before using it.

By default, the animation is automatically removed from the Calayer after the animation is finished, and the Calayer is returned to its original state. To keep the animation running, you can add 48th, 50 lines of code

The difference between byvalue and Tovalue is how much the former is added to the current position, and the latter is to the specified position.

Execution effect:

Set up Agent: Set up an animation agent, you can listen to the animation of the execution process, here set the controller as an agent.

code example:

Copy Code code as follows:

#import "YYViewController.h"

@interface Yyviewcontroller ()
@property (Nonatomic,strong) Calayer *mylayer;
@end

@implementation Yyviewcontroller

-(void) viewdidload
{
[Super Viewdidload];

Create Layer
Calayer *mylayer=[calayer layer];
Set the properties of layer
Mylayer.bounds=cgrectmake (0, 0, 50, 80);
Mylayer.backgroundcolor=[uicolor Yellowcolor]. Cgcolor;
Mylayer.position=cgpointmake (50, 50);
Mylayer.anchorpoint=cgpointmake (0, 0);
mylayer.cornerradius=20;
Add Layer
[Self.view.layer Addsublayer:mylayer];
Self.mylayer=mylayer;
}

Set animation (underlying animation)


-(void) Touchesbegan: (Nsset *) touches withevent: (Uievent *) event


{


1. Create a core animation


Cabasicanimation *anima=[cabasicanimation animationwithkeypath:&lt;# (NSString *) #&gt;]


Cabasicanimation *anima=[cabasicanimation Animation];





1.1 Tell the system what kind of animation to perform


anima.keypath=@ "position";


Set the animation to move layer from where to where


Anima.fromvalue=[nsvalue valuewithcgpoint:cgpointmake (0, 0)];


Anima.tovalue=[nsvalue Valuewithcgpoint:cgpointmake (200, 300)];





1.2 Set animation does not delete animation after completion


Anima.removedoncompletion=no;


1.3 Setting the latest status for saving animations


Anima.fillmode=kcafillmodeforwards;


anima.delegate=self;


Print


NSString *str=nsstringfromcgpoint (self.myLayer.position);


NSLog (@ "Before execution:%@", str);





2. Add core animation to layer


[Self.mylayer Addanimation:anima Forkey:nil];

}

-(void) Animationdidstart: (caanimation *) Anim
{
NSLog (@ "Start animation");
}

-(void) Animationdidstop: (Caanimation *) Anim finished: (BOOL) flag
{
Finish the animation, print the position value after the completion of the execution
NSString *str=nsstringfromcgpoint (self.myLayer.position);
NSLog (@ "After execution:%@", str);
}

@end

Print the Position property value, verify that the layer's property value or the initial value {50,50} before the animation is executed, is not actually changed to {200,300}.

Third, zoom animation

code example to implement scaling animation:

Copy Code code as follows:

//
Yyviewcontroller.m
08-Core Animation translation
//
Created by Apple on 14-6-21.
Copyright (c) 2014 itcase. All rights reserved.
//

#import "YYViewController.h"

@interface Yyviewcontroller ()
@property (Nonatomic,strong) Calayer *mylayer;
@end

Copy Code code as follows:

@implementation Yyviewcontroller

-(void) viewdidload
{
    [super Viewdidload];
   
    //Create layer
    calayer *mylayer=[calayer layer];
   //Set layer Properties
    mylayer.bounds=cgrectmake (0, 0, 150, 60);
    Mylayer.backgroundcolor=[uicolor Yellowcolor]. Cgcolor;
    Mylayer.position=cgpointmake (50, 50);
    mylayer.anchorpoint=cgpointmake (0, 0);
    mylayer.cornerradius=40;
   //Add layer
    [Self.view.layer addsublayer:mylayer];
     Self.mylayer=mylayer;
}

-(void) Touchesbegan: (Nsset *) touches withevent: (Uievent *) event
{
1. Create animation
Cabasicanimation *anima=[cabasicanimation animationwithkeypath:@ "bounds"];
1.1 Set animation Execution time
anima.duration=2.0;
1.2 Set animation does not delete animation after execution
Anima.removedoncompletion=no;
1.3 Setting the latest status for saving animations
Anima.fillmode=kcafillmodeforwards;
1.4 Modifying properties to perform animation
Anima.tovalue=[nsvalue valuewithcgrect:cgrectmake (0, 0, 200, 200)];
2. Add animation to Layer
[Self.mylayer Addanimation:anima Forkey:nil];
}

@end

Implementation effect:

Four, rotating animation

code example:

Copy Code code as follows:

//
Yyviewcontroller.m
09-Core Animation rotation
//
Created by Apple on 14-6-21.
Copyright (c) 2014 itcase. All rights reserved.
//

#import "YYViewController.h"

@interface Yyviewcontroller ()
@property (Nonatomic,strong) Calayer *mylayer;
@end

Copy Code code as follows:

@implementation Yyviewcontroller


-(void) viewdidload


{


[Super Viewdidload];





Create Layer


Calayer *mylayer=[calayer layer];


Set the properties of layer


Mylayer.bounds=cgrectmake (0, 0, 150, 60);


Mylayer.backgroundcolor=[uicolor Yellowcolor]. Cgcolor;


Mylayer.position=cgpointmake (50, 50);


Mylayer.anchorpoint=cgpointmake (0, 0);


mylayer.cornerradius=40;


Add Layer


[Self.view.layer Addsublayer:mylayer];


Self.mylayer=mylayer;


}

-(void) Touchesbegan: (Nsset *) touches withevent: (Uievent *) event
{
1. Create animation
Cabasicanimation *anima=[cabasicanimation animationwithkeypath:@ "transform"];
1.1 Set animation Execution time
anima.duration=2.0;
1.2 Modifying properties to perform animation
Anima.tovalue=[nsvalue valuewithcatransform3d:catransform3dmakerotation (M_pi_2+m_pi_4, 1, 1, 0)];
1.3 Set animation does not delete animation after execution
Anima.removedoncompletion=no;
1.4 Setting the latest status for saving animations
Anima.fillmode=kcafillmodeforwards;

2. Add animation to Layer
[Self.mylayer Addanimation:anima Forkey:nil];
}
@end

Implementation effect:

Add:

Can be set by transform (KVC).

code example (translation):

Copy Code code as follows:

#import "YYViewController.h"

@interface Yyviewcontroller ()
@property (Nonatomic,strong) Calayer *mylayer;
@end

Copy Code code as follows:

@implementation Yyviewcontroller


-(void) viewdidload


{


[Super Viewdidload];





Create Layer


Calayer *mylayer=[calayer layer];


Set the properties of layer


Mylayer.bounds=cgrectmake (0, 0, 150, 60);


Mylayer.backgroundcolor=[uicolor Yellowcolor]. Cgcolor;


Mylayer.position=cgpointmake (50, 50);


Mylayer.anchorpoint=cgpointmake (0, 0);


mylayer.cornerradius=40;


Add Layer


[Self.view.layer Addsublayer:mylayer];


Self.mylayer=mylayer;


}

-(void) Touchesbegan: (Nsset *) touches withevent: (Uievent *) event
{
1. Create animation
Cabasicanimation *anima=[cabasicanimation Animation];
anima.keypath=@ "Transform";
1.1 Set animation Execution time
anima.duration=2.0;
1.2 Modifying properties to perform animation

Anima.tovalue=[nsvalue valuewithcatransform3d:catransform3dmaketranslation (0, 100, 1)];
1.3 Set animation does not delete animation after execution
Anima.removedoncompletion=no;
1.4 Setting the latest status for saving animations
Anima.fillmode=kcafillmodeforwards;

2. Add animation to Layer
[Self.mylayer Addanimation:anima Forkey:nil];
}

Implementation effect:

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

V. Key-Frame animation

1. Brief introduction

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

Attribute resolution:

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

Path: You can set a cgpathref\cgmutablepathref to move the layer along the path. Path only works on the anchorpoint and position of Calayer. If you set path, then values will be ignored

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

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

2. code example

The first way:

Code:

Copy Code code as follows:

//
Yyviewcontroller.m
10-Core Animation (key frame animation 1)
//
Created by Apple on 14-6-21.
Copyright (c) 2014 itcase. All rights reserved.
//

#import "YYViewController.h"

@interface Yyviewcontroller ()
@property (Weak, nonatomic) Iboutlet UIView *customview;

@end

Copy Code code as follows:

@implementation Yyviewcontroller

-(void) Touchesbegan: (Nsset *) touches withevent: (Uievent *) event


{


1. Create a core animation


Cakeyframeanimation *keyanima=[cakeyframeanimation Animation];


Translation


keyanima.keypath=@ "position";


1.1 Tell the system what animations to perform


Nsvalue *value1=[nsvalue valuewithcgpoint:cgpointmake (100, 100)];


Nsvalue *value2=[nsvalue Valuewithcgpoint:cgpointmake (200, 100)];


Nsvalue *value3=[nsvalue Valuewithcgpoint:cgpointmake (200, 200)];


Nsvalue *value4=[nsvalue valuewithcgpoint:cgpointmake (100, 200)];


Nsvalue *value5=[nsvalue valuewithcgpoint:cgpointmake (100, 100)];


KEYANIMA.VALUES=@[VALUE1,VALUE2,VALUE3,VALUE4,VALUE5];


1.2 Set the animation to finish, do not delete the animation


Keyanima.removedoncompletion=no;


1.3 Setting the latest status for saving animations


Keyanima.fillmode=kcafillmodeforwards;


1.4 Set the time of animation execution


keyanima.duration=4.0;


1.5 Set the rhythm of the animation


Keyanima.timingfunction=[camediatimingfunction Functionwithname:kcamediatimingfunctioneaseineaseout];





Set agent, start-end


keyanima.delegate=self;


2. Add Core Animation


[Self.customView.layer Addanimation:keyanima Forkey:nil];


}

-(void) Animationdidstart: (caanimation *) Anim
{
NSLog (@ "Start animation");
}

-(void) Animationdidstop: (Caanimation *) Anim finished: (BOOL) flag
{
NSLog (@ "End animation");
}
@end

Description: This project drags a view into the storyboard and associates it with the custom in the controller.

Effects and Print results:

Add: Set the rhythm of the animation

The second way (using path) lets layer move on the specified path (Draw circle):

Code:

Copy Code code as follows:

#import "YYViewController.h"

@interface Yyviewcontroller ()
@property (Weak, nonatomic) Iboutlet UIView *customview;

@end

Copy Code code as follows:

@implementation Yyviewcontroller

-(void) Touchesbegan: (Nsset *) touches withevent: (Uievent *) event


{


1. Create a core animation


Cakeyframeanimation *keyanima=[cakeyframeanimation Animation];


Translation


keyanima.keypath=@ "position";


1.1 Tell the system what animations to perform


Create a path


Cgmutablepathref path=cgpathcreatemutable ();


Set the path of a circle


Cgpathaddellipseinrect (Path, NULL, CGRectMake (150, 100, 100, 100));


Keyanima.path=path;





If you have a create, you must have release.


Cgpathrelease (path);


1.2 Set the animation to finish, do not delete the animation


Keyanima.removedoncompletion=no;


1.3 Setting the latest status for saving animations


Keyanima.fillmode=kcafillmodeforwards;


1.4 Set the time of animation execution


keyanima.duration=5.0;


1.5 Set the rhythm of the animation


Keyanima.timingfunction=[camediatimingfunction Functionwithname:kcamediatimingfunctioneaseineaseout];





Set agent, start-end


keyanima.delegate=self;


2. Add Core Animation


[Self.customView.layer Addanimation:keyanima Forkey:nil];


}

-(void) Animationdidstart: (caanimation *) Anim
{
NSLog (@ "Start animation");
}

-(void) Animationdidstop: (Caanimation *) Anim finished: (BOOL) flag
{
NSLog (@ "End animation");
}
@end

Note: You can use the Path property to allow layer to move on a specified trajectory.

Stop Animation:

Copy Code code as follows:

#import "YYViewController.h"

@interface Yyviewcontroller ()
@property (Weak, nonatomic) Iboutlet UIView *customview;
-(Ibaction) Stoponclick: (UIButton *) sender;

@end

Copy Code code as follows:

@implementation Yyviewcontroller

-(void) Touchesbegan: (Nsset *) touches withevent: (Uievent *) event


{


1. Create a core animation


Cakeyframeanimation *keyanima=[cakeyframeanimation Animation];


Translation


keyanima.keypath=@ "position";


1.1 Tell the system what animations to perform


Create a path


Cgmutablepathref path=cgpathcreatemutable ();


Set the path of a circle


Cgpathaddellipseinrect (Path, NULL, CGRectMake (150, 100, 100, 100));


Keyanima.path=path;





If you have a create, you must have release.


Cgpathrelease (path);


1.2 Set the animation to finish, do not delete the animation


Keyanima.removedoncompletion=no;


1.3 Setting the latest status for saving animations


Keyanima.fillmode=kcafillmodeforwards;


1.4 Set the time of animation execution


keyanima.duration=5.0;


1.5 Set the rhythm of the animation


Keyanima.timingfunction=[camediatimingfunction Functionwithname:kcamediatimingfunctioneaseineaseout];





2. Add Core Animation


[Self.customView.layer addanimation:keyanima forkey:@ "wendingding"];


}

-(Ibaction) Stoponclick: (UIButton *) Sender {
Stop the animation on the Self.customView.layer name labeled Wendingding
[Self.customView.layer removeanimationforkey:@ "wendingding"];
}
@end

Click to stop animation, the program will call [Self.customView.layer removeanimationforkey:@ "wendingding"]; Stop the animation on the Self.customView.layer name labeled Wendingding.

3. Icon Jitter

code example:

Copy Code code as follows:

//
Yyviewcontroller.m
12-Icon Jitter
//
Created by Apple on 14-6-21.
Copyright (c) 2014 itcase. All rights reserved.
//

#import "YYViewController.h"
#define Angle2radian (angle) (angle)/180.0*M_PI)

@interface Yyviewcontroller ()
@property (Weak, nonatomic) Iboutlet Uiimageview *iconview;

@end

Copy Code code as follows:

@implementation Yyviewcontroller

-(void) Touchesbegan: (Nsset *) Touches withevent: (Uievent *) event
{
   //1. To create a core animation
    cakeyframeanimation *keyanima=[cakeyframeanimation Animation];
    keyanima.keypath=@ "Transform.rotation";
   //Set animation time
    keyanima.duration=0.1
   //Set icon jitter radians
   //Convert degrees to radians   degrees/180*M_PI
    keyanima.values=@[@ (-angle2radian (4)), @ ( Angle2radian (4)), @ (-angle2radian (4))];
   //Set the number of repetitions of the animation (set to maximum)
    keyanima.repeatcount=maxfloat
    
    keyanima.fillmode=kcafillmodeforwards;
    Keyanima.removedoncompletion=no;
   //2. Add animation
    [Self.iconView.layer Addanimation:keyanima forkey:nil];
}

@end

Description: The icon to the left and right deflection of a radian (4), creating a visual effect of jitter.

Program Interface: