CABasicAnimation精讲
前言
本教程写了这个效果图的demo,同时总结CABasicAnimation
的使用方法。
看完gif动画完,看到了什么?平移、旋转、缩放、闪烁、路径动画。
实现平移动画
实现平移动画,我们可以通过transform.translation
或者水平transform.translation.x
或者垂直平移transform.translation.y
添加动画。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
// 平移动画
- (void)baseTranslationAnimation {
UIView *springView = [[UIView alloc] initWithFrame:CGRectMake(0, 380, 50, 50)];
[self.view addSubview:springView];
springView.layer.borderColor = [UIColor greenColor].CGColor;
springView.layer.borderWidth = 2;
springView.backgroundColor = [UIColor redColor];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.translation"];
animation.duration = 2;
CGFloat width = self.view.frame.size.width;
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(width - 50, 0)];
// 指定动画重复多少圈是累加的
animation.cumulative = YES;
// 动画完成是不自动很危险
animation.removedOnCompletion = NO;
// 设置移动的效果为快入快出
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
// 设置无限循环动画
animation.repeatCount = HUGE_VALF;
// 设置动画完成时,自动以动画回到原点
animation.autoreverses = YES;
// 设置动画完成时,返回到原点
animation.fillMode = kCAFillModeForwards;
[springView.layer addAnimation:animation forKey:@"transform.translation"];
}
|
translation
是平移的意思,大家需要记住它。这里只是水平移动,其实我们可以直接对transform.translation.x
设置动画。不过直接使用transform.translation
也是可以的,我们设置y
值为0就可以了。
首先,我们通过属性路径的方法来创建动画对象:
1
2
3
|
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.translation"];
|
我们设置目的地为水平移动到屏宽再减去控件的宽50,由于我们只是水平移动,垂直方向没有移动,因此第二个参数设置为0即可。我们需要明确一点,toValue
这里是指移动的距离而不是移到这个点:
1
2
3
|
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(width - 50, 0)];
|
对于其它属性的设置,看注释里的说明就可以明白了。
旋转动画
旋转动画需要借助CATransform3D
这个表示三维空间的结构体,可以X轴旋转、Y轴旋转、Z轴旋转:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
// 旋转动画
- (void)baseRotationAnimation {
UIView *springView = [[UIView alloc] initWithFrame:CGRectMake(0, 240, 50, 50)];
[self.view addSubview:springView];
springView.layer.borderColor = [UIColor greenColor].CGColor;
springView.layer.borderWidth = 2;
springView.backgroundColor = [UIColor redColor];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
animation.duration = 2;
// Z轴旋转180度
CATransform3D transform3d = CATransform3DMakeRotation(3.1415926, 0, 0, 180);
animation.toValue = [NSValue valueWithCATransform3D:transform3d];
animation.cumulative = YES;
animation.removedOnCompletion = NO;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.repeatCount = HUGE_VALF;
animation.autoreverses = YES;
animation.fillMode = kCAFillModeForwards;
[springView.layer addAnimation:animation forKey:@"transform"];
}
|
我们通过属性路径创建动画:
1
2
3
|
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
|
然后通过创建CATransform3D
结构体,指定旋转的角度为180度,X、Y轴不旋转,Z轴旋转180度:
1
2
3
4
|
CATransform3D transform3d = CATransform3DMakeRotation(3.1415926, 0, 0, 180);
animation.toValue = [NSValue valueWithCATransform3D:transform3d];
|
其它属性设置与平移动画一样。
缩放动画
transform.scale
这个是图的属性路径,设置scale
值就可以达到缩放的效果:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
// 缩放动画
- (void)baseScaleAnimation {
UIView *springView = [[UIView alloc] initWithFrame:CGRectMake(0, 120, 50, 50)];
[self.view addSubview:springView];
springView.layer.borderColor = [UIColor greenColor].CGColor;
springView.layer.borderWidth = 2;
springView.backgroundColor = [UIColor redColor];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
animation.duration = 2;
animation.fromValue = @(1);
animation.toValue = @(0);
animation.removedOnCompletion = NO;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.repeatCount = HUGE_VALF;
animation.autoreverses = YES;
animation.fillMode = kCAFillModeForwards;
[springView.layer addAnimation:animation forKey:@"transform.scale"];
}
|
我们通过属性路径方法创建动画对象:
1
2
3
|
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
|
我们设置了初始变换和最终变换为1和0:
1
2
3
4
|
animation.fromValue = @(1);
animation.toValue = @(0);
|
其实由于图初始状态值为正常状态,没有任何缩放,因此其值本就是1,所以fromValue
可以不设置的。
闪烁动画
我们这里说的闪烁动画其实就是透明度的变化,当然我们不能通过alpha
值的变化来实现闪烁动画,因此这个属性是不具备隐式动画效果的。不过系统提供了opacity
,我们可以通过这个值的变化来实现闪烁效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
// 闪烁动画
- (void)baseSpringAnimation {
UIView *springView = [[UIView alloc] initWithFrame:CGRectMake(0, 50, 50, 50)];
[self.view addSubview:springView];
springView.layer.borderColor = [UIColor greenColor].CGColor;
springView.layer.borderWidth = 2;
springView.backgroundColor = [UIColor redColor];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
animation.duration = 2;
animation.fromValue = @(1);
animation.toValue = @(0);
animation.removedOnCompletion = NO;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.repeatCount = HUGE_VALF;
animation.autoreverses = YES;
animation.fillMode = kCAFillModeForwards;
[springView.layer addAnimation:animation forKey:@"opacity"];
}
|
我们通过属性路径opacity
来创建动画对象,注意不能使用alpha
,否则不会有动画效果的:
1
2
3
|
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
|
我们设置透明度从1->0变换,其它属性设置与上面平移动画一样:
1
2
3
4
|
animation.fromValue = @(1);
animation.toValue = @(0);
|
路径动画
路径动画这里添加了灰常详细的注释说明,几乎都包含了所有常用的属性设置了:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
// 路径动画
- (void)baseAnimation {
UIView *animationView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
animationView.layer.borderWidth = 2;
animationView.layer.borderColor = [UIColor redColor].CGColor;
animationView.backgroundColor = [UIColor greenColor];
[self.view addSubview:animationView];
// 添加动画
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
// 起点,这个值是指position,也就是layer的中心值
animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(50, 50)];
// 终点,这个值是指position,也就是layer的中心值
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(self.view.bounds.size.width - 50,
self.view.bounds.size.height - 100)];
// byValue与toValue的区别:byValue是指x方向再移动到指定的宽然后y方向移动指定的高
// 而toValue是整体移动到指定的点
// animation.byValue = [NSValue valueWithCGPoint:CGPointMake(self.view.bounds.size.width - 50 - 50,
// self.view.bounds.size.height - 50 - 50 - 50)];
// 线性动画
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
animation.removedOnCompletion = NO;
// 设定开始值到结束值花费的时间,也就是动画时长,单位为秒
animation.duration = 2;
// 播放速率,默认为1,表示常速
// 设置为2则以2倍的速度播放,同样设置为N则以N倍速度播放
// 如果值小于1,自然就是慢放
animation.speed = 0.5;
// 开始播放动画的时间,默认为0.0,通常是在组合动画中使用
animation.beginTime = 0.0;
// 播放动画的次数,默认为0,表示只播放一次
// 设置为3表示播放3次
// 设置为HUGE_VALF表示无限动画次数
animation.repeatCount = HUGE_VALF;
// 默认为NO,设置为YES后,在动画达到toValue点时,就会以动画由toValue返回到fromValue点。
// 如果不设置或设置为NO,在动画到达toValue时,就会突然马上返回到fromValue点
animation.autoreverses = YES;
// 当autoreverses设置为NO时,最终会留在toValue处
animation.fillMode = kCAFillModeForwards;
// 将动画添加到层中
[animationView.layer addAnimation:animation forKey:@"position"];
}
|
在图中position
是层相对于父层的中心,而UI控件的center
中心一样。这里要整体曲线路径移动,我们通过position
中心点的变换就可以曲线路径移动。
这里设置了CAMediaTiming
协议中的所有属性,详细看代码中的注释吧,已经很详细了!
CABasicAnimation精讲的更多相关文章
- 深入Java核心 Java内存分配原理精讲
深入Java核心 Java内存分配原理精讲 栈.堆.常量池虽同属Java内存分配时操作的区域,但其适用范围和功用却大不相同.本文将深入Java核心,详细讲解Java内存分配方面的知识. Java内存分 ...
- WKWebView API精讲(OC)
WKWebView API精讲(OC) 前言 鉴于LL同志对笔者说:“能不能写个OC版本的WKWebView的使用教程?”,还积极打赏了30RMB,笔者又怎么好意思拒绝呢,于是才有了下文. 所有看到本 ...
- 《VC++ 6简明教程》即VC++ 6.0入门精讲 学习进度及笔记
VC++6.0入门→精讲 2013.06.09,目前,每一章的“自测题”和“小结”三个板块还没有看(备注:第一章的“实验”已经看完). 2013.06.16 第三章的“实验”.“自测题”.“小结”和“ ...
- iOS开发——语法篇OC篇&高级语法精讲二
Objective高级语法精讲二 Objective-C是基于C语言加入了面向对象特性和消息转发机制的动态语言,这意味着它不仅需要一个编译器,还需要Runtime系统来动态创建类和对象,进行消息发送和 ...
- iOS开发——语法篇OC篇&高级语法精讲
高级语法精讲 一.NSSet.NSMutableSet集合的介绍 1)NSSet.NSMutableSet集合,元素是无序的,不能有重复的值. 2)用实例方法创建一个不可变集合对象 例如: //宏定义 ...
- iOS CAShapeLayer精讲
前言 CAShapeLayer继承自CALayer,因此,可使用CALayer的所有属性.但是,CAShapeLayer需要和贝塞尔曲线配合使用才有意义. 关于UIBezierPath,请阅读文章:i ...
- 【C++自我精讲】基础系列二 const
[C++自我精讲]基础系列二 const 0 前言 分三部分:const用法.const和#define比较.const作用. 1 const用法 const常量:const可以用来定义常量,不可改变 ...
- iOS-UI控件精讲之UIView
道虽迩,不行不至:事虽小,不为不成. 相关阅读 1.iOS-UI控件精讲之UIView(本文) 2.iOS-UI控件精讲之UILabel ...待续 UIView是所有UI控件的基类,在布局的时候通常 ...
- 【C++自我精讲】基础系列四 static
[C++自我精讲]基础系列四 static 0 前言 变量的存储类型:存储类型按变量的生存期划分,分动态存储方式和静态存储方式. 1)动态存储方式的变量,生存期为变量所在的作用域.即程序运行到此变量时 ...
随机推荐
- 爬虫技术(五)-- 模拟简单浏览器(附c#代码)
由于最近在做毕业设计,需要用到一些简单的浏览器功能,于是学习了一下,顺便写篇博客~~大牛请勿喷,菜鸟练练手~ 实现界面如下:(简单朴素版@_@||) button_go实现如下: private vo ...
- windows 下 apache设置
apache,apache配置,配置端口 mac下apache配置 添加虚拟主机: Alias /selftest/ "D:/self-test/" <Directory & ...
- 一个java高级工程师的进阶之路
宏观方面 一. JAVA.要想成为JAVA(高级)工程师肯定要学习JAVA.一般的程序员或许只需知道一些JAVA的语法结构就可以应付了.但要成为JAVA(高级) 工程师,您要对JAVA做比较深入的研究 ...
- DB2之隔离级别和锁的论述
在DB2数据库中, 是通过行级锁和表级锁协调作用来提供较好的并发性, 同时保证数据库中数据的安全. 在DB2中缺省情况下使用行级锁(当然需要IS/IX锁配合),只有当出现锁资源不足, 或者是用命令指定 ...
- 为SQL表添加全文索引范例
--范例: --为HR_Job中的JobTitle,JobDes创建全文索引 execute sp_fulltext_catalog 'boli188', 'create' --创建全文目录,boli ...
- 【Mongo】Linux安装MongoDB
呵呵哒,每天都是小惊喜. 一 下载 https://www.mongodb.org/downloads可进行下载,根据需要选择合适的版本和操作系统 二 上传服务器 1 上传服务器路径并解压 2 创建数 ...
- Asp.Net中的获取Web.config中设置的参数!(前后台的代码示例)
一.Web.config中设置代码 <appSettings> <add key="deleted" value="1" ...
- cocos2d-x知识巩固-基础篇(2)
上一篇博客介绍了整个cocos2dx引擎需要掌握的各个模块,每一个模块实际上往深了研究都有难点,后面我会详细地去分析它的用法.今天我们从第一个模块说起,即渲染模块.首先,为了理解,我们做个类比,说明该 ...
- 关于在Eclipse里面启动了服务,但是localhost:8080无法访问的问题:
今天eclipse重新换了一个然后写项目,结果发生了一些bug,当在Tomca服务开启之后,浏览器端输入localhost:8080无法访问,以为是服务器没有搞定,检查了没问题,百度了一下有很多乱七八 ...
- 基于Python的Grib数据可视化
http://www.cnblogs.com/kallan/p/5160017.html