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 @end 14 15 @implementation YYViewController
16 17 - (void)viewDidLoad
18 {
19  [super viewDidLoad];
20 21 //创建layer 22 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 //添加layer 30  [self.view.layer addSublayer:myLayer];
31 self.myLayer=myLayer;
32 }
33 34 //设置动画（基础动画） 35 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 36 {
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.添加核心动画到layer 53  [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)viewDidLoad
10 {
11  [super viewDidLoad];
12 13 //创建layer 14 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 //添加layer 22  [self.view.layer addSublayer:myLayer];
23 self.myLayer=myLayer;
24 }
25 26 //设置动画（基础动画） 27 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 28 {
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.添加核心动画到layer 49  [self.myLayer addAnimation:anima forKey:nil];
50 51 }
52 53 -(void)animationDidStart:(CAAnimation *)anim
54 {
55 NSLog(@"开始执行动画");
56 }
57 58 -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
59 {
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 @end 14 15 @implementation YYViewController
16 17 - (void)viewDidLoad
18 {
19  [super viewDidLoad];
20 21 //创建layer 22 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 //添加layer 30  [self.view.layer addSublayer:myLayer];
31 self.myLayer=myLayer;
32 }
33 34 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 35 {
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.添加动画到layer 47  [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 @end 14 15 @implementation YYViewController
16 - (void)viewDidLoad
17 {
18  [super viewDidLoad];
19 20 //创建layer 21 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 //添加layer 29  [self.view.layer addSublayer:myLayer];
30 self.myLayer=myLayer;
31 }
32 33 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 34 {
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.添加动画到layer 47  [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 //创建layer 13 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 //添加layer 21  [self.view.layer addSublayer:myLayer];
22 self.myLayer=myLayer;
23 }
24 25 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 26 {
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.添加动画到layer 41  [self.myLayer addAnimation:anima forKey:nil];
42 }

实现效果：

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

时间： 2024-10-31 18:38:11

iOS开发UI篇—核心动画(基础动画)的相关文章

iOS开发UI篇—核心动画(UIView封装动画)

一.UIView动画(首尾) 1.简单说明 UIKit直接将动画集成到UIView类中,当内部的一些属性发生改变时,UIView将为这些改变提供动画支持执行动画所需要的工作由UIView类自动完成,但仍要在希望执行动画时通知视图,为此需要将改变属性的代码放在[UIViewbeginAnimations:nil context:nil]和[UIView commitAnimations]之间常见方法解析: + (void)setAnimationDelegate:(id)delegate 设置

iOS开发UI篇—核心动画简介

一.简单介绍 Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代码就可以实现非常强大的功能. Core Animation是跨平台的,可以用在Mac OS X和iOS平台. Core Animation的动画执行过程都是在后台操作的,不会阻塞主线程.不阻塞主线程,可以理解为在执行动画的时候还能点击(按钮). 要注意的是,Core Animation是直接作用在CALayer上的,并非UIV

iOS开发UI篇—核心动画(转场动画和组动画)

一.转场动画简单介绍 CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果.iOS比Mac OS X的转场动画效果少一点 UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果属性解析: type:动画过渡类型 subtype:动画过渡方向 startProgress:动画起点(在整体动画的百分比) endProgress:动画终点(在整体动画的百分比) 二.转场动画代码示例 1.界面搭建 2.实现代

iOS开发UI篇—核心动画(关键帧动画)

一.简单介绍是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSArray保存这些数值属性解析: values:就是上述的NSArray对象.里面的元素称为"关键帧"(keyframe).动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧 path:可以

iOS开发UI篇—popoverController使用注意

iOS开发UI篇-popoverController使用注意 iOS开发UI篇-popoverController使用注意一.设置尺寸提示:不建议,像下面这样吧popover的宽度和高度写死. 1 //1.新建一个内容控制器 2 YYMenuViewController *menuVc=[[YYMenuViewController alloc]init]; 3 4 //2.新建一个popoverController,并设置其内容控制器 5 self.popover=[[UIPopoverCo

iOS开发UI篇—UITableviewcell的性能优化和缓存机制

iOS开发UI篇-UITableviewcell的性能问题一.UITableviewcell的一些介绍 UITableView的每一行都是一个UITableViewCell,通过dataSource的 tableView:cellForRowAtIndexPath:方法来初始化每⼀行 UITableViewCell内部有个默认的子视图:contentView,contentView是UITableViewCell所显示内容的父视图,可显示一些辅助指示视图辅助指示视图的作⽤是显示一个表示动作的

iOS开发UI篇：APP主流UI框架结构

一.简单示例说明:使用APP主流UI框架结构完成简单的界面搭建搭建页面效果: 开发UI篇:APP主流UI框架结构-"> 查看本栏目更多精彩内容:http://www.bianceng.cnhttp://www.bianceng.cn/OS/extra/

IOS开发UI篇--IOS动画（Core Animation）总结

一.简介 IOS 动画主要是指Core Animation框架.官方使用文档地址为:Core Animation Guide. Core Animation是IOS和OS X平台上负责图形渲染与动画的基础框架.Core Animation可以作用与动画视图或者其他可视元素,为你完成了动画所需的大部分绘帧工作.你只需要配置少量的动画参数(如开始点的位置和结束点的位置)即可使用Core Animation的动画效果.Core Animation将大部分实际的绘图任务交给了图形硬件来处理,图形硬件会加

iOS开发UI篇—xib的简单使用实例_IOS

这个博客申请了有一段时间了,觉得好像是该写点什么了.这篇文章主要是关于一些xib的简单的用法,希望可以帮助到刚刚使用xib的新手们. 什么是xib? xib能做什么? 用来描述软件界面的文件. 如果没有xib,所有的界面都需要通过代码来手动创建. 有了xib以后,可以在xib中进行可视化开发,然后加载xib文件的时候,系统自动生成对应的代码来创建界面. 与xib类似的还有storyboard文件.xib和storyboard的比较,一个轻量级一个重量级. 共同点: 都用来描述软件界面.都用Int