Home>

First, a brief introduction

subclass of capropertyanimation

Property resolution:

fromvalue:the initial value of the corresponding attribute of keypath

tovalue:the end value of the corresponding attribute of keypath

As the animation progresses,For the duration of duration,The value of the corresponding attribute of keypath gradually changed from fromvalue to tovalue

If fillmode=kcafillmodeforwards and removedoncomletion=no, then after the animation finishes,The layer remains displayed after the animation is executed.But in essence,The attribute value of the layer is still the initial value before the animation is executed.It hasn't really changed.

For example, the initial value of the position of the calayer is (0,0), the fromvalue of the basic animation is (10,10), and the tovalue is (100,100), although the layer remains at the (100,100) position after the animation is completed,In essence, the position of the layer is still (0,0)

Second, pan moving painting

Code example:

//
//yyviewcontroller.m
//07-core animation (basic animation)
//
//created by apple on 14-6-21.
//copyright (c) 2014 itcase. all rights reserved.
//
</p>
<p>
#import "yyviewcontroller.h"
</p>
<p>
@interface yyviewcontroller ()
@property (nonatomic, strong) calayer * mylayer;
@end

@implementation yyviewcontroller
</p>
<p>
-(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;
}
</p>
<p>
//Set the animation (basic animation)
-(void) touchesbegan:(nsset *) touches withevent:(uievent *) event
{
 //1. Create core animation
 //cabasicanimation * anima=[cabasicanimation animationwithkeypath:<#(nsstring *) #>]
 cabasicanimation * anima=[cabasicanimation animation];
 //1.1 tell the system what kind of animation to execute
 anima.keypath [email protected]"position";
 //Set through animation,Where to move the layer
 anima.fromvalue=[nsvalue valuewithcgpoint:cgpointmake (0, 0)];
 anima.tovalue=[nsvalue valuewithcgpoint:cgpointmake (200, 300)];
 //1.2 Set the animation not to be deleted after the animation is completed
 anima.removedoncompletion=no;
 //1.3 Set the latest state of the saved animation
 anima.fillmode=kcafillmodeforwards;
</p>
<p>
//2. Add core animation to layer
 [self.mylayer addanimation:anima forkey:nil];
</p>
<p>
}
@End

Code description:

The keypath set in line 42 [email protected]"position", which means that the position property of the calayer to be modified, that is, the panning drawing will be performed

Lines 44 and 45. The attribute here receives a parameter of type id.Therefore, cgpoint cannot be used directly.Instead, it must be wrapped into an nsvalue object before being used.

by default,After the animation finishes,The animation will be automatically removed from the calayer, and the calayer will return to its original state.In order to maintain the state after the animation is executed,Can add lines 48, 50

The difference between byvalue and tovalue, the former is how much to increase at the current position,The latter is to the specified location.

Implementation effect:

Set proxy:Set proxy for animation,You can monitor the execution of the animation,Set the controller as a proxy here.

Code example:

#import "yyviewcontroller.h"
</p>
<p>
@interface yyviewcontroller ()
@property (nonatomic, strong) calayer * mylayer;
@end
</p>
<p>
@implementation yyviewcontroller
</p>
<p>
-(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;
}
</p>
<p>
//Set the animation (basic animation)
-(void) touchesbegan:(nsset *) touches withevent:(uievent *) event
{
 //1. Create core animation
 //cabasicanimation * anima=[cabasicanimation animationwithkeypath:<#(nsstring *) #>]
 cabasicanimation * anima=[cabasicanimation animation];
 //1.1 tell the system what kind of animation to execute
 anima.keypath [email protected]"position";
 //Set through animation,Where to move the layer
 anima.fromvalue=[nsvalue valuewithcgpoint:cgpointmake (0, 0)];
 anima.tovalue=[nsvalue valuewithcgpoint:cgpointmake (200, 300)];
 //1.2 Set the animation not to be deleted after the animation is completed
 anima.removedoncompletion=no;
 //1.3 Set the latest state of the saved animation
 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];
</p>
<p>
}
</p>
<p>
-(void) animationdidstart:(caanimation *) anim
{
 nslog (@ "Start animation");
}
</p>
<p>
-(void) animationdidstop:(caanimation *) anim finished:(bool) flag
{
 //The animation is finished,Print the position value after execution
 nsstring * str=nsstringfromcgpoint (self.mylayer.position);
 nslog (@ "After execution:%@", str);
}
</p>
<p>
@end

Print the attribute value of position,Verify that the attribute value of the layer is still the initial value {50,50} before the animation is executed, and it has not been changed to {200,300}.

Three, zoom animation

Example code to implement zoom animation:

//
//yyviewcontroller.m
//08-core animation pan
//
//created by apple on 14-6-21.
//copyright (c) 2014 itcase. all rights reserved.
//
</p>
<p>
#import "yyviewcontroller.h"
</p>
<p>
@interface yyviewcontroller ()
@property (nonatomic, strong) calayer * mylayer;
@end

@implementation yyviewcontroller
</p>
<p>
-(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;
}
</p>
<p>
-(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 the animation not to be deleted after the animation is completed
 anima.removedoncompletion=no;
 //1.3 Set the latest state of the saved animation
 anima.fillmode=kcafillmodeforwards;
 //1.4 modify attributes,Execute animation
 anima.tovalue=[nsvalue valuewithcgrect:cgrectmake (0, 0, 200, 200)];
 //2. Add animation to layer
 [self.mylayer addanimation:anima forkey:nil];
}
</p>
<p>
@end

Realize the effect:

Fourth, rotation animation

Code example:

//
//yyviewcontroller.m
//09-core animation rotation
//
//created by apple on 14-6-21.
//copyright (c) 2014 itcase. all rights reserved.
//
</p>
<p>
#import "yyviewcontroller.h"
</p>
<p>
@interface yyviewcontroller ()
@property (nonatomic, strong) calayer * mylayer;
@end

@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;
}
</p>
<p>
-(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 modify attributes,Execute animation
 anima.tovalue=[nsvalue valuewithcatransform3d:catransform3dmakerotation (m_pi_2 + m_pi_4, 1, 1, 0)];
 //1.3 Set the animation not to be deleted after the animation is completed
 anima.removedoncompletion=no;
 //1.4 Set the latest state of the saved animation
 anima.fillmode=kcafillmodeforwards;
 //2. Add animation to layer
 [self.mylayer addanimation:anima forkey:nil];
}
@end

Realize the effect:

supplement:

Can be set by transform (kvc).

Code example (panning):

#import "yyviewcontroller.h"
</p>
<p>
@interface yyviewcontroller ()
@property (nonatomic, strong) calayer * mylayer;
@end

@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;
}
</p>
<p>
-(void) touchesbegan:(nsset *) touches withevent:(uievent *) event
{
 //1. Create animation
 cabasicanimation * anima=[cabasicanimation animation];
 anima.keypath [email protected]"transform";
 //1.1 set animation execution time
 anima.duration=2.0;
 //1.2 modify attributes,Execute animation
 anima.tovalue=[nsvalue valuewithcatransform3d:catransform3dmaketranslation (0, 100, 1)];
 //1.3 Set the animation not to be deleted after the animation is completed
 anima.removedoncompletion=no;
 //1.4 Set the latest state of the saved animation
 anima.fillmode=kcafillmodeforwards;
 //2. Add animation to layer
 [self.mylayer addanimation:anima forkey:nil];
}

Realize the effect:

The drawn figure moves 100 units in the y direction.

Five, key frame animation

1. Brief introduction

It is a subclass of capropertyanimation. The difference from cabancianimation is that:cabasicanimation can only change from one value (fromvalue) to another value (tovalue), and cakeyframeanimation uses an nsarray to store these values

Property resolution:

values:These are the nsarray objects described above. The elements inside are called "keyframes". The animation object will display each key frame in the values ​​array in turn within the specified time (duration)

path:You can set a cgpathref \ cgmutablepathref to make the layer follow the path.path only works for anchorpoint and position of calayer. If you set path, values ​​will be ignored

keytimes:you can specify the corresponding time points for the corresponding key frames,Its value ranges from 0 to 1.0, and each time value in keytimes corresponds to each frame in values.When keytimes is not set,The time of each key frame is divided equally

Note:The basic animation can be regarded as a cakeyframeanimation with up to 2 key frames

2. Code example

The first way:

Code:

//
//yyviewcontroller.m
//10-core animation (keyframe animation 1)
//
//created by apple on 14-6-21.
//copyright (c) 2014 itcase. all rights reserved.
//
</p>
<p>
#import "yyviewcontroller.h"
</p>
<p>
@interface yyviewcontroller ()
@property (weak, nonatomic) iboutlet uiview * customview;
</p>
<p>
@end

@implementation yyviewcontroller
</p>
<p>
-(void) touchesbegan:(nsset *) touches withevent:(uievent *) event
{
 //1. Create core animation
 cakeyframeanimation * keyanima=[cakeyframeanimation animation];
 //pan
 keyanima.keypath [email protected]"position";
 //1.1 tell the system what animation to execute
 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 ​​[email protected][value1, value2, value3, value4, value5];
 //1.2 After setting the animation,Do not delete animation
 keyanima.removedoncompletion=no;
 //1.3 Set the latest state of the saved animation
 keyanima.fillmode=kcafillmodeforwards;
 //1.4 Set the time for the animation to execute
 keyanima.duration=4.0;
 //1.5 Set the rhythm of the animation
 keyanima.timingfunction=[camediatimingfunction functionwithname:kcamediatimingfunctioneaseineaseout];
 //Set proxy,start end
 keyanima.delegate=self;
 //2. Add core animation
 [self.customview.layer addanimation:keyanima forkey:nil];
}
</p>
<p>
-(void) animationdidstart:(caanimation *) anim
{
 nslog (@ "Start Animation");
}
</p>
<p>
-(void) animationdidstop:(caanimation *) anim finished:(bool) flag
{
 nslog (@ "End Animation");
}
@end

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

Effects and print results:

Added:Set the tempo of the animation

The second way (using path) makes the layer move (draw a circle) on the specified path:

Code:

#import "yyviewcontroller.h"
</p>
<p>
@interface yyviewcontroller ()
@property (weak, nonatomic) iboutlet uiview * customview;
</p>
<p>
@end

@implementation yyviewcontroller
</p>
<p>
-(void) touchesbegan:(nsset *) touches withevent:(uievent *) event
{
 //1. Create core animation
 cakeyframeanimation * keyanima=[cakeyframeanimation animation];
 //pan
 keyanima.keypath [email protected]"position";
 //1.1 tell the system what animation to execute
 //Create a path
 cgmutablepathref path=cgpathcreatemutable ();
 //Set a circular path
 cgpathaddellipseinrect (path, null, cgrectmake (150, 100, 100, 100));
 keyanima.path=path;
 //If there is create, there must be release
 cgpathrelease (path);
 //1.2 After setting the animation,Do not delete animation
 keyanima.removedoncompletion=no;
 //1.3 Set the latest state of the saved animation
 keyanima.fillmode=kcafillmodeforwards;
 //1.4 Set the time for the animation to execute
 keyanima.duration=5.0;
 //1.5 Set the rhythm of the animation
 keyanima.timingfunction=[camediatimingfunction functionwithname:kcamediatimingfunctioneaseineaseout];
 //Set proxy,start end
 keyanima.delegate=self;
 //2. Add core animation
 [self.customview.layer addanimation:keyanima forkey:nil];
}
</p>
<p>
-(void) animationdidstart:(caanimation *) anim
{
 nslog (@ "Start Animation");
}
</p>
<p>
-(void) animationdidstop:(caanimation *) anim finished:(bool) flag
{
 nslog (@ "End Animation");
}
@end

Note:You can use the path attribute to make the layer move on the specified track.

Stop animation:

#import "yyviewcontroller.h"
</p>
<p>
@interface yyviewcontroller ()
@property (weak, nonatomic) iboutlet uiview * customview;
-(ibaction) stoponclick:(uibutton *) sender;
</p>
<p>
@end

@implementation yyviewcontroller
</p>
<p>
-(void) touchesbegan:(nsset *) touches withevent:(uievent *) event
{
 //1. Create core animation
 cakeyframeanimation * keyanima=[cakeyframeanimation animation];
 //pan
 keyanima.keypath [email protected]"position";
 //1.1 tell the system what animation to execute
 //Create a path
 cgmutablepathref path=cgpathcreatemutable ();
 //Set a circular path
 cgpathaddellipseinrect (path, null, cgrectmake (150, 100, 100, 100));
 keyanima.path=path;
 //If there is create, there must be release
 cgpathrelease (path);
 //1.2 After setting the animation,Do not delete animation
 keyanima.removedoncompletion=no;
 //1.3 Set the latest state of the saved animation
 keyanima.fillmode=kcafillmodeforwards;
 //1.4 Set the time for the animation to execute
 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"];
}
</p>
<p>
-(ibaction) stoponclick:(uibutton *) sender {
 //Stop the animation named self-customing.layer on the self.customview.layer
 [self.customview.layer removeanimationforkey:@"wendingding"];
}
@end

Click to stop the animation,The program will call [self.customview.layer removeanimationforkey:@"wendingding"];to stop the animation with the name of pendingding on self.customview.layer.

3. Icon shake

Code example:

//
//yyviewcontroller.m
//12- icon jitter
//
//created by apple on 14-6-21.
//copyright (c) 2014 itcase. all rights reserved.
//
</p>
<p>
#import "yyviewcontroller.h"
#define angle2radian (angle) ((angle) /180.0*m_pi)
</p>
<p>
@interface yyviewcontroller ()
@property (weak, nonatomic) iboutlet uiimageview * iconview;
</p>
<p>
@end

@implementation yyviewcontroller
</p>
<p>
-(void) touchesbegan:(nsset *) touches withevent:(uievent *) event
{
 //1. Create core animation
 cakeyframeanimation * keyanima=[cakeyframeanimation animation];
 keyanima.keypath [email protected]"transform.rotation";
 //Set animation time
 keyanima.duration=0.1;
 //Set the icon jitter radian
 //Convert degrees to radians degrees/180 * m_pi
 keyanima.values ​​[email protected][@ (-angle2radian (4)),@(angle2radian (4)),@(-angle2radian (4))];
 //Set the number of times the animation is repeated (set to the maximum)
 keyanima.repeatcount=maxfloat;
 keyanima.fillmode=kcafillmodeforwards;
 keyanima.removedoncompletion=no;
 //2. Add animation
 [self.iconview.layer addanimation:keyanima forkey:nil];
}
</p>
<p>
@end

Note:The icon is deflected one arc (4) to the left and right, producing a visual effect of jitter.

Program interface:

ios
  • Previous Explain how to parse and modify XML content in Python programs
  • Next Javascript entry tutorial basics