前言

本教程写了这个效果图的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精讲的更多相关文章

  1. 深入Java核心 Java内存分配原理精讲

    深入Java核心 Java内存分配原理精讲 栈.堆.常量池虽同属Java内存分配时操作的区域,但其适用范围和功用却大不相同.本文将深入Java核心,详细讲解Java内存分配方面的知识. Java内存分 ...

  2. WKWebView API精讲(OC)

    WKWebView API精讲(OC) 前言 鉴于LL同志对笔者说:“能不能写个OC版本的WKWebView的使用教程?”,还积极打赏了30RMB,笔者又怎么好意思拒绝呢,于是才有了下文. 所有看到本 ...

  3. 《VC++ 6简明教程》即VC++ 6.0入门精讲 学习进度及笔记

    VC++6.0入门→精讲 2013.06.09,目前,每一章的“自测题”和“小结”三个板块还没有看(备注:第一章的“实验”已经看完). 2013.06.16 第三章的“实验”.“自测题”.“小结”和“ ...

  4. iOS开发——语法篇OC篇&高级语法精讲二

    Objective高级语法精讲二 Objective-C是基于C语言加入了面向对象特性和消息转发机制的动态语言,这意味着它不仅需要一个编译器,还需要Runtime系统来动态创建类和对象,进行消息发送和 ...

  5. iOS开发——语法篇OC篇&高级语法精讲

    高级语法精讲 一.NSSet.NSMutableSet集合的介绍 1)NSSet.NSMutableSet集合,元素是无序的,不能有重复的值. 2)用实例方法创建一个不可变集合对象 例如: //宏定义 ...

  6. iOS CAShapeLayer精讲

    前言 CAShapeLayer继承自CALayer,因此,可使用CALayer的所有属性.但是,CAShapeLayer需要和贝塞尔曲线配合使用才有意义. 关于UIBezierPath,请阅读文章:i ...

  7. 【C++自我精讲】基础系列二 const

    [C++自我精讲]基础系列二 const 0 前言 分三部分:const用法.const和#define比较.const作用. 1 const用法 const常量:const可以用来定义常量,不可改变 ...

  8. iOS-UI控件精讲之UIView

    道虽迩,不行不至:事虽小,不为不成. 相关阅读 1.iOS-UI控件精讲之UIView(本文) 2.iOS-UI控件精讲之UILabel ...待续 UIView是所有UI控件的基类,在布局的时候通常 ...

  9. 【C++自我精讲】基础系列四 static

    [C++自我精讲]基础系列四 static 0 前言 变量的存储类型:存储类型按变量的生存期划分,分动态存储方式和静态存储方式. 1)动态存储方式的变量,生存期为变量所在的作用域.即程序运行到此变量时 ...

随机推荐

  1. Android 开机动画启动过程详解

    Android 开机会出现3个画面: 1. Linux 系统启动,出现Linux小企鹅画面(reboot)(Android 1.5及以上版本已经取消加载图片): 2. Android平台启动初始化,出 ...

  2. POJ 2947 Widget Factory (高斯消元 判多解 无解 和解集 模7情况)

    题目链接 题意: 公司被吞并,老员工几乎全部被炒鱿鱼.一共有n种不同的工具,编号1-N(代码中是0—N-1), 每种工具的加工时间为3—9天 ,但是现在老员工不在我们不知道每种工具的加工时间,庆幸的是 ...

  3. .frm文件

    http://www.cnblogs.com/jiangxu67/p/4755097.html MySQL]frm文件解析 MySQL 协议字节序 关于传输整数小大端的实现 http://hamilt ...

  4. UVa 10253 (组合数 递推) Series-Parallel Networks

    <训练之南>上的例题难度真心不小,勉强能看懂解析,其思路实在是意想不到. 题目虽然说得千奇百怪,但最终还是要转化成我们熟悉的东西. 经过书上的神分析,最终将所求变为: 共n个叶子,每个非叶 ...

  5. LA 2402 (枚举) Fishnet

    题意: 正方形四个边界上分别有n个点,将其划分为(n+1)2个四边形,求四边形面积的最大值. 分析: 因为n的规模很小,所以可以二重循环枚举求最大值. 求直线(a, 0) (b, 0) 和直线(0, ...

  6. uva 11624 Fire!(搜索)

    开始刷题啦= = 痛并快乐着,学到新东西的感觉其实比看那些无脑的小说.电视剧有意思多了 bfs裸体,关键是先把所有的着火点放入队列,分开一个一个做bfs会超时的 发现vis[][]是多余的,完全可以用 ...

  7. 深入理解移动web开发之PPI,Pixel,DevicePixelRatio(转)

    如果你是一个开始接触移动Web开发的前端工程师,那么你或许也遇到了和我曾经遇到的过问题:有太多新的概念需要掌握,太多相似的概念需要区分.没关系,我将用两篇文章的篇幅来解决这些问题.上篇文章关于解释和区 ...

  8. USACO1.4.1 Packing Rectangles

    //毕竟我不是dd牛,USACO的题解也不可能一句话带过的…… 题目链接:http://cerberus.delos.com:790/usacoprob2?a=pWvHFwGsTb2&S=pa ...

  9. [总结]FFMPEG视音频编解码零基础学习方法--转

    ffmpeg编解码学习   目录(?)[-] ffmpeg程序的使用ffmpegexeffplayexeffprobeexe 1 ffmpegexe 2 ffplayexe 3 ffprobeexe ...

  10. Memcache应用场景介绍,说明

    面临的问题 对于高并发高访问的Web应用程序来说,数据库存取瓶颈一直是个令人头疼的问题.特别当你的程序架构还是建立在单数据库模式,而一个数据池连接数峰 值已经达到500的时候,那你的程序运行离崩溃的边 ...