1、Ios动画核心iOS开发UI篇核心动画(基础动画)一、简单介绍CAPropertyAnimation的子类属性解析:fromValue:keyPath相应属性的初始值toValue:keyPath相应属性的结束值随着动画的进行,在长度为duration的持续时间内,keyPath相应属性的值从fromValue渐渐地变为toValue如果fillMode=kCAFillModeForwards和removedOnComletion=NO,那么在动画执行完毕后,图层会保持显示动画执行后的状态。但在实质上,图层的属性值还是动画执行前的初始值,并没有真正被改变。比如,CALayer的position
2、初始值为(0,0),CABasicAnimation的fromValue为(10,10),toValue为(100,100),虽然动画执行完毕后图层保持在(100,100)这个位置,实质上图层的position还是为(0,0)二、平移动画代码示例: 1 / 2 / YYViewController.m 3 / 07-核心动画(基础动画) 4 / 5 / Created by apple on 14-6-21. 6 / Copyright (c) 2014年 itcase. All rights reserved. 7 / 8 9 #import YYViewController.h10 11
3、interface YYViewController ()12 property(nonatomic,strong)CALayer *myLayer;13 end14 15 implementation YYViewController16 17 - (void)viewDidLoad18 19 super viewDidLoad;20 21 /创建layer22 CALayer *myLayer=CALayer layer;23 /设置layer的属性24 myLayer.bounds=CGRectMake(0, 0, 50, 80);25 myLayer.backgroundColor=U
4、IColor yellowColor.CGColor;26 myLayer.position=CGPointMake(50, 50);27 myLayer.anchorPoint=CGPointMake(0, 0);28 myLayer.cornerRadius=20;29 /添加layer30 self.view.layer addSublayer:myLayer;31 self.myLayer=myLayer;32 33 34 /设置动画(基础动画)35 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event36 37
5、 /1.创建核心动画38 / CABasicAnimation *anima=CABasicAnimation animationWithKeyPath:39 CABasicAnimation *anima=CABasicAnimation animation;40 41 /1.1告诉系统要执行什么样的动画42 anima.keyPath=position;43 /设置通过动画,将layer从哪儿移动到哪儿44 anima.fromValue=NSValue valueWithCGPoint:CGPointMake(0, 0);45 anima.toValue=NSValue valueWit
6、hCGPoint:CGPointMake(200, 300);46 47 /1.2设置动画执行完毕之后不删除动画48 anima.removedOnCompletion=NO;49 /1.3设置保存动画的最新状态50 anima.fillMode=kCAFillModeForwards;51 52 /2.添加核心动画到layer53 self.myLayer addAnimation:anima forKey:nil;54 55 end代码说明:第42行设置的keyPath是position,说明要修改的是CALayer的position属性,也就是会执行平移动画第44,45行,这里的属性接收
7、的时id类型的参数,因此并不能直接使用CGPoint这种结构体类型,而是要先包装成NSValue对象后再使用。默认情况下,动画执行完毕后,动画会自动从CALayer上移除,CALayer又会回到原来的状态。为了保持动画执行后的状态,可以加入第48,50行代码byValue和toValue的区别,前者是在当前的位置上增加多少,后者是到指定的位置。执行效果:设置代理:设置动画的代理,可以监听动画的执行过程,这里设置控制器为代理。代码示例: 1 #import YYViewController.h 2 3 interface YYViewController () 4 property(nonato
8、mic,strong)CALayer *myLayer; 5 end 6 7 implementation YYViewController 8 9 - (void)viewDidLoad10 11 super viewDidLoad;12 13 /创建layer14 CALayer *myLayer=CALayer layer;15 /设置layer的属性16 myLayer.bounds=CGRectMake(0, 0, 50, 80);17 myLayer.backgroundColor=UIColor yellowColor.CGColor;18 myLayer.position=CG
9、PointMake(50, 50);19 myLayer.anchorPoint=CGPointMake(0, 0);20 myLayer.cornerRadius=20;21 /添加layer22 self.view.layer addSublayer:myLayer;23 self.myLayer=myLayer;24 25 26 /设置动画(基础动画)27 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event28 29 /1.创建核心动画30 / CABasicAnimation *anima=CABasicAni
10、mation animationWithKeyPath:31 CABasicAnimation *anima=CABasicAnimation animation;32 33 /1.1告诉系统要执行什么样的动画34 anima.keyPath=position;35 /设置通过动画,将layer从哪儿移动到哪儿36 anima.fromValue=NSValue valueWithCGPoint:CGPointMake(0, 0);37 anima.toValue=NSValue valueWithCGPoint:CGPointMake(200, 300);38 39 /1.2设置动画执行完毕
11、之后不删除动画40 anima.removedOnCompletion=NO;41 /1.3设置保存动画的最新状态42 anima.fillMode=kCAFillModeForwards;43 anima.delegate=self;44 /打印45 NSString *str=NSStringFromCGPoint(self.myLayer.position);46 NSLog(执行前:%,str);47 48 /2.添加核心动画到layer49 self.myLayer addAnimation:anima forKey:nil;50 51 52 53 -(void)animationD
12、idStart:(CAAnimation *)anim54 55 NSLog(开始执行动画);56 57 58 -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag59 60 /动画执行完毕,打印执行完毕后的position值61 NSString *str=NSStringFromCGPoint(self.myLayer.position);62 NSLog(执行后:%,str);63 64 65 end打印position的属性值,验证图层的属性值还是动画执行前的初始值50,50,并没有真正被改变为200,300。三
13、、缩放动画实现缩放动画的代码示例: 1 / 2 / YYViewController.m 3 / 08-核心动画平移 4 / 5 / Created by apple on 14-6-21. 6 / Copyright (c) 2014年 itcase. All rights reserved. 7 / 8 9 #import YYViewController.h10 11 interface YYViewController ()12 property(nonatomic,strong)CALayer *myLayer;13 end14 15 implementation YYViewCon
14、troller16 17 - (void)viewDidLoad18 19 super viewDidLoad;20 21 /创建layer22 CALayer *myLayer=CALayer layer;23 /设置layer的属性24 myLayer.bounds=CGRectMake(0, 0, 150, 60);25 myLayer.backgroundColor=UIColor yellowColor.CGColor;26 myLayer.position=CGPointMake(50, 50);27 myLayer.anchorPoint=CGPointMake(0, 0);28
15、 myLayer.cornerRadius=40;29 /添加layer30 self.view.layer addSublayer:myLayer;31 self.myLayer=myLayer;32 33 34 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event35 36 /1.创建动画37 CABasicAnimation *anima=CABasicAnimation animationWithKeyPath:bounds;38 /1.1设置动画执行时间39 anima.duration=2.0;40 /1.2
16、设置动画执行完毕后不删除动画41 anima.removedOnCompletion=NO;42 /1.3设置保存动画的最新状态43 anima.fillMode=kCAFillModeForwards;44 /1.4修改属性,执行动画45 anima.toValue=NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200);46 /2.添加动画到layer47 self.myLayer addAnimation:anima forKey:nil;48 49 50 end实现效果:四、旋转动画代码示例: 1 / 2 / YYViewControlle
17、r.m 3 / 09-核心动画旋转 4 / 5 / Created by apple on 14-6-21. 6 / Copyright (c) 2014年 itcase. All rights reserved. 7 / 8 9 #import YYViewController.h10 11 interface YYViewController ()12 property(nonatomic,strong)CALayer *myLayer;13 end14 15 implementation YYViewController16 - (void)viewDidLoad17 18 super
18、viewDidLoad;19 20 /创建layer21 CALayer *myLayer=CALayer layer;22 /设置layer的属性23 myLayer.bounds=CGRectMake(0, 0, 150, 60);24 myLayer.backgroundColor=UIColor yellowColor.CGColor;25 myLayer.position=CGPointMake(50, 50);26 myLayer.anchorPoint=CGPointMake(0, 0);27 myLayer.cornerRadius=40;28 /添加layer29 self.
19、view.layer addSublayer:myLayer;30 self.myLayer=myLayer;31 32 33 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event34 35 /1.创建动画36 CABasicAnimation *anima=CABasicAnimation animationWithKeyPath:transform;37 /1.1设置动画执行时间38 anima.duration=2.0;39 /1.2修改属性,执行动画40 anima.toValue=NSValue valueWi
20、thCATransform3D:CATransform3DMakeRotation(M_PI_2+M_PI_4, 1, 1, 0);41 /1.3设置动画执行完毕后不删除动画42 anima.removedOnCompletion=NO;43 /1.4设置保存动画的最新状态44 anima.fillMode=kCAFillModeForwards;45 46 /2.添加动画到layer47 self.myLayer addAnimation:anima forKey:nil;48 49 end实现效果: 提示:如果要让图形以2D的方式旋转,只需要把CATransform3DMakeRotati
21、on在z方向上的值改为1即可。anima.toValue=NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2+M_PI_4, 1, 1, 0);四、补充可以通过transform(KVC)的方式来进行设置。代码示例(平移): 1 #import YYViewController.h 2 3 interface YYViewController () 4 property(nonatomic,strong)CALayer *myLayer; 5 end 6 7 implementation YYViewControlle
22、r 8 - (void)viewDidLoad 9 10 super viewDidLoad;11 12 /创建layer13 CALayer *myLayer=CALayer layer;14 /设置layer的属性15 myLayer.bounds=CGRectMake(0, 0, 150, 60);16 myLayer.backgroundColor=UIColor yellowColor.CGColor;17 myLayer.position=CGPointMake(50, 50);18 myLayer.anchorPoint=CGPointMake(0, 0);19 myLayer.
23、cornerRadius=40;20 /添加layer21 self.view.layer addSublayer:myLayer;22 self.myLayer=myLayer;23 24 25 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event26 27 /1.创建动画28 CABasicAnimation *anima=CABasicAnimation animation;29 anima.keyPath=transform;30 /1.1设置动画执行时间31 anima.duration=2.0;32 /1.2修改属性,执行动画33 34 anima.toValue=NSValue valueWithCATransform3D:CATransform3DMakeTranslation(0, 100, 1);35 /1.3设置动画执行完毕后不删除动画36 anima.removedOnCompletion=NO;37 /1.4设置保存动画的最新状态38 anima.fillMode=kCAFillModeForwards;39 40 /2.添加动画到layer41 self.myLayer addAnimation:anima forKey:nil;42