首页 > 代码库 > iOS开发UI篇—核心动画(基础动画)
iOS开发UI篇—核心动画(基础动画)
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 // Created by apple on 14-6-21. 6 // Copyright (c) 2014年 itcase. All rights reserved. 7 // 8 9 #import "YYViewController.h"10 11 @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=[UIColor 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 //1.创建核心动画38 // CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:<#(NSString *)#>]39 CABasicAnimation *anima=[CABasicAnimation animation];40 41 //1.1告诉系统要执行什么样的动画42 anima.keyPath=@"position";43 //设置通过动画，将layer从哪儿移动到哪儿44 anima.fromValue=http://www.mamicode.com/[NSValue valueWithCGPoint:CGPointMake(0, 0)];> @end代码说明：
第42行设置的keyPath是@"position"，说明要修改的是CALayer的position属性，也就是会执行平移动画
第44，45行，这里的属性接收的时id类型的参数，因此并不能直接使用CGPoint这种结构体类型，而是要先包装成NSValue对象后再使用。
默认情况下，动画执行完毕后，动画会自动从CALayer上移除，CALayer又会回到原来的状态。为了保持动画执行后的状态，可以加入第48，50行代码
byValue和toValue的区别，前者是在当前的位置上增加多少，后者是到指定的位置。
执行效果：
设置代理：设置动画的代理，可以监听动画的执行过程，这里设置控制器为代理。
代码示例：
1 #import "YYViewController.h" 2 3 @interface YYViewController () 4 @property(nonatomic,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=CGPointMake(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=[CABasicAnimation animationWithKeyPath:<#(NSString *)#>]31 CABasicAnimation *anima=[CABasicAnimation animation];32 33 //1.1告诉系统要执行什么样的动画34 anima.keyPath=@"position";35 //设置通过动画，将layer从哪儿移动到哪儿36 anima.fromValue=http://www.mamicode.com/[NSValue valueWithCGPoint:CGPointMake(0, 0)];"执行前：%@",str);47 48 //2.添加核心动画到layer49 [self.myLayer addAnimation:anima forKey:nil];50 51 }52 53 -(void)animationDidStart:(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}。
三、缩放动画
实现缩放动画的代码示例：
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.h"10 11 @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, 150, 60);25 myLayer.backgroundColor=[UIColor yellowColor].CGColor;26 myLayer.position=CGPointMake(50, 50);27 myLayer.anchorPoint=CGPointMake(0, 0);28 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设置动画执行完毕后不删除动画41 anima.removedOnCompletion=NO;42 //1.3设置保存动画的最新状态43 anima.fillMode=kCAFillModeForwards;44 //1.4修改属性，执行动画45 anima.toValue=http://www.mamicode.com/[NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];>实现效果：
四、旋转动画
代码示例：
1 // 2 // YYViewController.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.h"10 11 @interface YYViewController ()12 @property(nonatomic,strong)CALayer *myLayer;13 @end14 15 @implementation YYViewController16 - (void)viewDidLoad17 {18 [super 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.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=http://www.mamicode.com/[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2+M_PI_4, 1, 1, 0)];>实现效果：
提示：如果要让图形以2D的方式旋转，只需要把CATransform3DMakeRotation在z方向上的值改为1即可。
anima.toValue=http://www.mamicode.com/[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 YYViewController 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.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=http://www.mamicode.com/[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(0, 100, 1)];>实现效果：
绘制的图形在y的方向上移动100个单位。
iOS开发UI篇—核心动画(基础动画)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。