博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iOS开发UI篇—核心动画(基础动画)
阅读量:5136 次
发布时间:2019-06-13

本文共 8151 字,大约阅读时间需要 27 分钟。

一、简单介绍

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=[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 }56@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}。

三、缩放动画

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

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

实现效果:

  

四、旋转动画

代码示例:

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=[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/zengshuilin/p/5757870.html

你可能感兴趣的文章
前端框架性能对比
查看>>
uva 387 A Puzzling Problem (回溯)
查看>>
12.2日常
查看>>
同步代码时忽略maven项目 target目录
查看>>
Oracle中包的创建
查看>>
django高级应用(分页功能)
查看>>
【转】Linux之printf命令
查看>>
关于PHP会话:session和cookie
查看>>
STM32F10x_RTC秒中断
查看>>
display:none和visiblity:hidden区别
查看>>
C#double转化成字符串 保留小数位数, 不以科学计数法的形式出现。
查看>>
牛的障碍Cow Steeplechase
查看>>
Zookeeper选举算法原理
查看>>
3月29日AM
查看>>
利用IP地址查询接口来查询IP归属地
查看>>
HTML元素定义 ID,Class,Style的优先级
查看>>
构造者模式
查看>>
http和https的区别
查看>>
Hbuild在线云ios打包失败,提示BuildConfigure Failed 31013 App Store 图标 未找到 解决方法...
查看>>
找到树中指定id的所有父节点
查看>>