Ios动画核心.docx
《Ios动画核心.docx》由会员分享，可在线阅读，更多相关《Ios动画核心.docx（14页珍藏版）》请在冰豆网上搜索。
Ios动画核心
iOS开发UI篇—核心动画（基础动画）
一、简单介绍
CAPropertyAnimation的子类
属性解析:
fromValue：
keyPath相应属性的初始值
toValue：
keyPath相应属性的结束值
随着动画的进行，在长度为duration的持续时间内，keyPath相应属性的值从fromValue渐渐地变为toValue
如果fillMode=kCAFillModeForwards和removedOnComletion=NO，那么在动画执行完毕后，图层会保持显示动画执行后的状态。
但在实质上，图层的属性值还是动画执行前的初始值，并没有真正被改变。
比如，CALayer的position初始值为（0,0），CABasicAnimation的fromValue为（10,10），toValue为（100,100），虽然动画执行完毕后图层保持在（100,100）这个位置，实质上图层的position还是为（0,0）
二、平移动画
代码示例：
1//
2//YYViewController.m
3//07-核心动画（基础动画）
4//
5//Createdbyappleon14-6-21.
6//Copyright（c）2014年itcase.Allrightsreserved.
7//
8
9#import"YYViewController.h"
10
11@interfaceYYViewController（）
12@property（nonatomic,strong）CALayer*myLayer;
13@end
14
15@implementationYYViewController
16
17-（void）viewDidLoad
18{
19[superviewDidLoad];
20
21//创建layer
22CALayer*myLayer=[CALayerlayer];
23//设置layer的属性
24myLayer.bounds=CGRectMake（0,0,50,80）;
25myLayer.backgroundColor=[UIColoryellowColor].CGColor;
26myLayer.position=CGPointMake（50,50）;
27myLayer.anchorPoint=CGPointMake（0,0）;
28myLayer.cornerRadius=20;
29//添加layer
30[self.view.layeraddSublayer:
myLayer];
31self.myLayer=myLayer;
32}
33
34//设置动画（基础动画）
35-（void）touchesBegan:
（NSSet*）toucheswithEvent:
（UIEvent*）event
36{
37//1.创建核心动画
38//CABasicAnimation*anima=[CABasicAnimationanimationWithKeyPath:
<#（NSString*）#>]
39CABasicAnimation*anima=[CABasicAnimationanimation];
40
41//1.1告诉系统要执行什么样的动画
42anima.keyPath=@"position";
43//设置通过动画，将layer从哪儿移动到哪儿
44anima.fromValue=[NSValuevalueWithCGPoint:
CGPointMake（0,0）];
45anima.toValue=[NSValuevalueWithCGPoint:
CGPointMake（200,300）];
46
47//1.2设置动画执行完毕之后不删除动画
48anima.removedOnCompletion=NO;
49//1.3设置保存动画的最新状态
50anima.fillMode=kCAFillModeForwards;
51
52//2.添加核心动画到layer
53[self.myLayeraddAnimation:
animaforKey:
nil];
54
55}
@end
代码说明：
第42行设置的keyPath是@"position"，说明要修改的是CALayer的position属性，也就是会执行平移动画
第44，45行，这里的属性接收的时id类型的参数，因此并不能直接使用CGPoint这种结构体类型，而是要先包装成NSValue对象后再使用。
默认情况下，动画执行完毕后，动画会自动从CALayer上移除，CALayer又会回到原来的状态。
为了保持动画执行后的状态，可以加入第48，50行代码
byValue和toValue的区别，前者是在当前的位置上增加多少，后者是到指定的位置。
执行效果：
设置代理：
设置动画的代理，可以监听动画的执行过程，这里设置控制器为代理。
代码示例：
1#import"YYViewController.h"
2
3@interfaceYYViewController（）
4@property（nonatomic,strong）CALayer*myLayer;
5@end
6
7@implementationYYViewController
8
9-（void）viewDidLoad
10{
11[superviewDidLoad];
12
13//创建layer
14CALayer*myLayer=[CALayerlayer];
15//设置layer的属性
16myLayer.bounds=CGRectMake（0,0,50,80）;
17myLayer.backgroundColor=[UIColoryellowColor].CGColor;
18myLayer.position=CGPointMake（50,50）;
19myLayer.anchorPoint=CGPointMake（0,0）;
20myLayer.cornerRadius=20;
21//添加layer
22[self.view.layeraddSublayer:
myLayer];
23self.myLayer=myLayer;
24}
25
26//设置动画（基础动画）
27-（void）touchesBegan:
（NSSet*）toucheswithEvent:
（UIEvent*）event
28{
29//1.创建核心动画
30//CABasicAnimation*anima=[CABasicAnimationanimationWithKeyPath:
<#（NSString*）#>]
31CABasicAnimation*anima=[CABasicAnimationanimation];
32
33//1.1告诉系统要执行什么样的动画
34anima.keyPath=@"position";
35//设置通过动画，将layer从哪儿移动到哪儿
36anima.fromValue=[NSValuevalueWithCGPoint:
CGPointMake（0,0）];
37anima.toValue=[NSValuevalueWithCGPoint:
CGPointMake（200,300）];
38
39//1.2设置动画执行完毕之后不删除动画
40anima.removedOnCompletion=NO;
41//1.3设置保存动画的最新状态
42anima.fillMode=kCAFillModeForwards;
43anima.delegate=self;
44//打印
45NSString*str=NSStringFromCGPoint（self.myLayer.position）;
46NSLog（@"执行前：
%@",str）;
47
48//2.添加核心动画到layer
49[self.myLayeraddAnimation:
animaforKey:
nil];
50
51}
52
53-（void）animationDidStart:
（CAAnimation*）anim
54{
55NSLog（@"开始执行动画"）;
56}
57
58-（void）animationDidStop:
（CAAnimation*）animfinished:
（BOOL）flag
59{
60//动画执行完毕，打印执行完毕后的position值
61NSString*str=NSStringFromCGPoint（self.myLayer.position）;
62NSLog（@"执行后：
%@",str）;
63}
64
65@end
打印position的属性值，验证图层的属性值还是动画执行前的初始值{50，50}，并没有真正被改变为{200，300}。
三、缩放动画
实现缩放动画的代码示例：
1//
2//YYViewController.m
3//08-核心动画平移
4//
5//Createdbyappleon14-6-21.
6//Copyright（c）2014年itcase.Allrightsreserved.
7//
8
9#import"YYViewController.h"
10
11@interfaceYYViewController（）
12@property（nonatomic,strong）CALayer*myLayer;
13@end
14
15@implementationYYViewController
16
17-（void）viewDidLoad
18{
19[superviewDidLoad];
20
21//创建layer
22CALayer*myLayer=[CALayerlayer];
23//设置layer的属性
24myLayer.bounds=CGRectMake（0,0,150,60）;
25myLayer.backgroundColor=[UIColoryellowColor].CGColor;
26myLayer.position=CGPointMake（50,50）;
27myLayer.anchorPoint=CGPointMake（0,0）;
28myLayer.cornerRadius=40;
29//添加layer
30[self.view.layeraddSublayer:
myLayer];
31self.myLayer=myLayer;
32}
33
34-（void）touchesBegan:
（NSSet*）toucheswithEvent:
（UIEvent*）event
35{
36//1.创建动画
37CABasicAnimation*anima=[CABasicAnimationanimationWithKeyPath:
@"bounds"];
38//1.1设置动画执行时间
39anima.duration=2.0;
40//1.2设置动画执行完毕后不删除动画
41anima.removedOnCompletion=NO;
42//1.3设置保存动画的最新状态
43anima.fillMode=kCAFillModeForwards;
44//1.4修改属性，执行动画
45anima.toValue=[NSValuevalueWithCGRect:
CGRectMake（0,0,200,200）];
46//2.添加动画到layer
47[self.myLayeraddAnimation:
animaforKey:
nil];
48}
49
50@end
实现效果：
四、旋转动画
代码示例：
1//
2//YYViewController.m
3//09-核心动画旋转
4//
5//Createdbyappleon14-6-21.
6//Copyright（c）2014年itcase.Allrightsreserved.
7//
8
9#import"YYViewController.h"
10
11@interfaceYYViewController（）
12@property（nonatomic,strong）CALayer*myLayer;
13@end
14
15@implementationYYViewController
16-（void）viewDidLoad
17{
18[superviewDidLoad];
19
20//创建layer
21CALayer*myLayer=[CALayerlayer];
22//设置layer的属性
23myLayer.bounds=CGRectMake（0,0,150,60）;
24myLayer.backgroundColor=[UIColoryellowColor].CGColor;
25myLayer.position=CGPointMake（50,50）;
26myLayer.anchorPoint=CGPointMake（0,0）;
27myLayer.cornerRadius=40;
28//添加layer
29[self.view.layeraddSublayer:
myLayer];
30self.myLayer=myLayer;
31}
32
33-（void）touchesBegan:
（NSSet*）toucheswithEvent:
（UIEvent*）event
34{
35//1.创建动画
36CABasicAnimation*anima=[CABasicAnimationanimationWithKeyPath:
@"transform"];
37//1.1设置动画执行时间
38anima.duration=2.0;
39//1.2修改属性，执行动画
40anima.toValue=[NSValuevalueWithCATransform3D:
CATransform3DMakeRotation（M_PI_2+M_PI_4,1,1,0）];
41//1.3设置动画执行完毕后不删除动画
42anima.removedOnCompletion=NO;
43//1.4设置保存动画的最新状态
44anima.fillMode=kCAFillModeForwards;
45
46//2.添加动画到layer
47[self.myLayeraddAnimation:
animaforKey:
nil];
48}
49@end
实现效果：
提示：
如果要让图形以2D的方式旋转，只需要把CATransform3DMakeRotation在z方向上的值改为1即可。
anima.toValue=[NSValuevalueWithCATransform3D:
CATransform3DMakeRotation（M_PI_2+M_PI_4,1,1,0）];
四、补充
可以通过transform（KVC）的方式来进行设置。
代码示例（平移）：
1#import"YYViewController.h"
2
3@interfaceYYViewController（）
4@property（nonatomic,strong）CALayer*myLayer;
5@end
6
7@implementationYYViewController
8-（void）viewDidLoad
9{
10[superviewDidLoad];
11
12//创建layer
13CALayer*myLayer=[CALayerlayer];
14//设置layer的属性
15myLayer.bounds=CGRectMake（0,0,150,60）;
16myLayer.backgroundColor=[UIColoryellowColor].CGColor;
17myLayer.position=CGPointMake（50,50）;
18myLayer.anchorPoint=CGPointMake（0,0）;
19myLayer.cornerRadius=40;
20//添加layer
21[self.view.layeraddSublayer:
myLayer];
22self.myLayer=myLayer;
23}
24
25-（void）touchesBegan:
（NSSet*）toucheswithEvent:
（UIEvent*）event
26{
27//1.创建动画
28CABasicAnimation*anima=[CABasicAnimationanimation];
29anima.keyPath=@"transform";
30//1.1设置动画执行时间
31anima.duration=2.0;
32//1.2修改属性，执行动画
33
34anima.toValue=[NSValuevalueWithCATransform3D:
CATransform3DMakeTranslation（0,100,1）];
35//1.3设置动画执行完毕后不删除动画
36anima.removedOnCompletion=NO;
37//1.4设置保存动画的最新状态
38anima.fillMode=kCAFillModeForwards;
39
40//2.添加动画到layer
41[self.myLayeraddAnimation:
animaforKey:
nil];
42}
升级会员 