核心动画(基础动画)-白红宇

核心动画(基础动画)

阅读量：6125 次

发布时间：2019-06-21

本文共 7714 字，大约阅读时间需要 25 分钟。

核心动画(基础动画)

一、简单介绍

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)

二、平移动画

代码示例：

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=[NSValue valueWithCGPoint:CGPointMake(0, 0)];45     anima.toValue=[NSValue valueWithCGPoint: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行，这里的属性接收的时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=[NSValue valueWithCGPoint:CGPointMake(0, 0)];37     anima.toValue=[NSValue valueWithCGPoint:CGPointMake(200, 300)];38     39     //1.2设置动画执行完毕之后不删除动画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)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}。

三、缩放动画

实现缩放动画的代码示例：

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=[NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];46     //2.添加动画到layer47     [self.myLayer addAnimation:anima forKey:nil];48 }49 50 @end

实现效果：

四、旋转动画

代码示例：

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=[NSValue valueWithCATransform3D: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的方式旋转，只需要把CATransform3DMakeRotation在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 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=[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 }

实现效果：

绘制的图形在y的方向上移动100个单位。

转载于:https://www.cnblogs.com/crash-wu/p/4797320.html

你可能感兴趣的文章