Ios动画核心.docx
- 文档编号:6411057
- 上传时间:2023-01-06
- 格式:DOCX
- 页数:14
- 大小:172.53KB
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}
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Ios 动画 核心