转自:iOS动画详解
原博主写的特别棒,在此收藏一遍以防丢失,供自己学习参考之用。
另,原文为Swift版本,本篇转为Objective-C版本。
一、基础知识
二、CABasicAnimation
1. 动画的属性和解释
属性 | 解释 |
---|---|
duration | 动画的持续时间 |
repeatCount | 动画持续次数 |
repeatDuration | 设置动画的时间,在该时间内动画一直执行,不计次数 |
beginTime | 指定动画开始的时间。从开始延迟几秒的话,设置为CACurrentMediaTime() + 秒数 的方式 |
timingFunction | 设置动画的速度变化 |
fillMode | 动画在开始和结束时的动作,默认值是 kCAFillModeRemoved |
autoreverses | 动画结束时是否执行逆动画 |
fromValue | 所改变属性的起始值 |
toValue | 所改变属性的结束时的值 |
byValue | 所改变属性相同起始值的改变量 |
keyPath | 可以指定keyPath为CALayer的属性值,并对它的值进行修改,以达到对应的动画效果,需要注意的是部分属性值是不支持动画效果的 |
以下是具有动画效果的keyPath:
//CATransform3D Key Paths : (example)transform.rotation.z
//rotation.x
//rotation.y
//rotation.z
//rotation 旋轉
//scale.x
//scale.y
//scale.z
//scale 缩放
//translation.x
//translation.y
//translation.z
//translation 平移
//CGPoint Key Paths : (example)position.x
//x
//y
//CGRect Key Paths : (example)bounds.size.width
//origin.x
//origin.y
//origin
//size.width
//size.height
//size
//opacity
//backgroundColor
//cornerRadius
//borderWidth
//contents
//Shadow Key Path:
//shadowColor
//shadowOffset
//shadowOpacity
//shadowRadius
2.属性值的解释
repeatCount:(一直重复的情况)
Swift:Float.infinity
OC:HUGE_VALF
-
TimingFunction:
kCAMediaTimingFunctionLinear
,在整个动画时间内动画都是以一个相同的速度来改变。也就是匀速运动。一个线性的计时函数,同样也是CAAnimation的timingFunction
属性为空时候的默认函数。线性步调对于那些立即加速并且保持匀速到达终点的场景会有意义(例如射出枪膛的子弹)。
kCAMediaTimingFunctionEaseIn
动画开始时会较慢,之后动画会加速。一个慢慢加速然后突然停止的方法。对于之前提到的自由落体的例子来说很适合,或者比如对准一个目标的导弹的发射。
kCAMediaTimingFunctionEaseOut
动画在开始时会较快,之后动画速度减慢。它以一个全速开始,然后慢慢减速停止。它有一个削弱的效果,应用的场景比如一扇门慢慢地关上,而不是砰地一声。
kCAMediaTimingFunctionEaseInEaseOut
动画在开始和结束时速度较慢,中间时间段内速度较快。创建了一个慢慢加速然后再慢慢减速的过程。这是现实世界大多数物体移动的方式,也是大多数动画来说最好的选择。如果只可以用一种缓冲函数的话,那就必须是它了。那么你会疑惑为什么这不是默认的选择,实际上当使用UIView
的动画方法时,他的确是默认的,但当创建CAAnimation
的时候,就需要手动设置它了。
kCAMediaTimingFunctionDefault
它和kCAMediaTimingFunctionEaseInEaseOut
很类似,但是加速和减速的过程都稍微有些慢。它和kCAMediaTimingFunctionEaseInEaseOut
的区别很难察觉,可能是苹果觉得它对于隐式动画来说更适合(然后对UIKit就改变了想法,而是使用kCAMediaTimingFunctionEaseInEaseOut
作为默认效果),虽然它的名字说是默认的,但还是要记住当创建显式的CAAnimation
它并不是默认选项(换句话说,默认的图层行为动画用kCAMediaTimingFunctionDefault
作为它们的计时方法)。
使用方法:
moveAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
- FillMode
kCAFillModeForwards :
动画开始之后layer
的状态将保持在动画的最后一帧,而removedOnCompletion
的默认属性值是YES
,所以为了使动画结束之后layer
保持结束状态,应将removedOnCompletion
设置为NO
。
kCAFillModeBackwards :
将会立即执行动画的第一帧,不论是否设置了 beginTime
属性。观察发现,设置该值,刚开始视图不见,还不知道应用在哪里。
kCAFillModeBoth:
该值是 kCAFillModeForwards
和 kCAFillModeBackwards
的组合状态
kCAFillModeRemoved:
动画将在设置的 beginTime
开始执行(如没有设置beginTime
属性,则动画立即执行),动画执行完成后将会layer
的改变恢复原状。
3.使用心得
尽量不要设置removedOnCompletion = false
,因为配合CAAnimationDelegate
会带来循环运用的问题,如果需要动画停留在最后的状态,可以直接设置View
的center
属性在动画结束的位置Point
之所以会出现 循环引用 因为由于CAAnimation
的delegate
使用的strong
类型:看一下简要的说明图:
解决有时视图会闪动一下的问题,我们可以将
layer
的属性值设置为我们的动画最后要达到的值,然后再给我们的视图添加layer动画。
4.样例展示
-
旋转动画
-
位移动画
-
背景颜色变化动画、背景图片变化动画、圆角变化动画
-
比例缩放动画
-
size大小缩放、透明值变化动画(可用作闪烁效果)
5.常用KeyPath总结
KeyPath值 | 说明 | Objective-C | Swift 3.0 |
---|---|---|---|
transform.scale | 比例缩放 | @(0.8) | 0.8 |
transform.scale.x | 缩放宽的比例 | @(0.8) | 0.8 |
transform.scale.y | 缩放高的比例 | @(0.8) | 0.8 |
transform.rotation.x | 围绕x轴旋转 | @(2 * M_PI) | 2 * M_PI |
transform.rotation.y | 围绕y轴旋转 | @(2 * M_PI) | 2 * M_PI |
transform.rotation.z | 围绕z轴旋转 | @(2 * M_PI) | 2 * M_PI |
backgroundColor | 背景颜色的变化 | (__bridge id _Nullable)([UIColor redColor].CGColor) | UIColor.red.cgColor |
bounds | 大小缩放,中心不变 | [NSValue valueWithCGRect:CGRectMake(0, 0, 90, 30)] | NSValue(cgRect: CGRect(x: 0, y: 0, width: 90, height: 30)) |
position | 位置(中心点的改变) | [NSValue valueWithCGPoint:CGPointMake(60, 240)] | NSValue(cgPoint: CGPoint(x: 60, y: 240)) |
contents | 内容,比如UIImageView的图片 | ((__bridge id)[UIImage imageNamed:@"to.jpg"].CGImage) | UIImage(named: "to")?.cgImage |
opacity | 透明度 | @(0.4) | 0.4 |
contentsRect.size.width | 横向拉伸缩放 | @(0.5) | 0.5 |
contentsRect.size.height | 纵向拉伸缩放 | @(0.5) | 0.5 |
三、CAKeyframeAnimation
CAKeyframeAnimation
是核心动画里面的帧动画,它提供了按照指定的一串值进行动画,好像拍电影一样的一帧一帧的效果。
1. 属性解释
values: 是许多值组成的数组用来进行动画的。这个属性比较特别,只有在
path
属性值为nil
的时候才有作用path:路径,可以指定一个路径,让动画沿着这个指定的路径执行。
cacluationMode:在关键帧动画中还有一个非常重要的参数,那便是
calculationMode
计算模式。其主要针对的是每一帧的内容为一个座标点的情况,也就是对anchorPoint
和position
进行的动画。当在平面座标系中有多个离散的点的时候,可以是离散的,也可以直线相连后进行插值计算,也可以使用圆滑的曲线将他们相连后进行插值计算。
- kCAAnimationLinear calculationMode的默认值,r自定义控制动画的时间(线性)可以设置
keyTimes
,表示当关键帧为座标点的时候,关键帧之间直接直线相连进行插值计算; - kCAAnimationDiscrete 离散的,就是不进行插值计算,所有关键帧直接逐个进行显示;
- kCAAnimationPaced 节奏动画自动计算动画的运动时间,使得动画均匀进行,而不是按
keyTimes
设置的或者按关键帧平分时间,此时keyTimes
和timingFunctions
无效; - kCAAnimationCubic 对关键帧为座标点的关键帧进行圆滑曲线相连后插值计算,对于曲线的形状还可以通过
tensionValues
、continuityValues
、biasValues
来进行调整自定义,这里的数学原理是Kochanek–Bartels spline,这里的主要目的是使得运行的轨迹变得圆滑,曲线动画需要设置timingFunctions
。 - kCAAnimationCubicPaced 看这个名字就知道和
kCAAnimationCubic
有一定联系,其实就是在kCAAnimationCubic
的基础上使得动画运行变得均匀,就是系统时间内运动的距离相同,此时keyTimes
以及timingFunctions
也是无效的。
keyTimes:一个包含若干
NSNumber
对象值的数组,用来区分动画的分割时机。值得注意的是,这些NSNumber
对象的浮点型值在0.0~1.0之间。里面的值后一个比前一个要大或者相等。最好的结果是这个数组中的值和values
里面的值或者path
控制的值对应,否则可能会出现不了你想要的结果。属性为应用在每一关键帧指定应用到每一个关键帧上的计时器。该属性只在calculationMode
属性被设置为kCAAnimationLinear
,kCAAnimaitonDiscrete
,kCAAnimationCubic
时被使用。它不使用在节奏动画中。keyTimes
定义了应用在每一关键帧的时间点。所有中间值的定时由定时函数控制,定时函数允许你对各个部分应用缓入或缓出曲线定时。如果你不指定任何定时函数,动画将会是线性的。rotationMode:旋转样式
- kCAAnimationRotateAuto 根据路径自动旋转
- kCAAnimationRotateAutoReverse 根据路径自动翻转
2. 样例展示
四、CATransition
主要用于转场动画从一个场景以动画的形式过渡到另一个场景。
1. 属性解释
- type:转场动画的类型,一个自定义的转场动画中指定的过滤器属性
| 系统公开API | 效果说明 | 是否支持方向 |
| ------------- |:-------------:| -----|
| kCATransitionFade | 淡出效果 | 是 |
| kCATransitionMoveIn | 新视图移动到旧视图上 | 是 |
| kCATransitionPush | 新视图推出旧视图 | 是 |
| kCATransitionReveal | 移开旧视图显示新视图 | 是 |
另外还有一些系统未公开的动画效果:
["cube", "suckEffect", "rippleEffect", "pageCurl", "pageUnCurl", "oglFlip", "cameraIrisHollowOpen", "cameraIrisHollowClose", "spewEffect","genieEffect","unGenieEffect","twist","tubey","swirl","charminUltra", "zoomyIn", "zoomyOut", "oglApplicationSuspend"]
效果,就不一一列举了,可以看下效果图
- subtype:转场动画将要去往的方向。
- startProgress、endProgress: 开始和结束的位置进度,数值介于[0,1]之间,结束值一定是大于开始值的。
动画子类型 | 说明 |
---|---|
kCATransitionFromRight | 从右侧转场 |
kCATransitionFromLeft | 从左侧转场 |
kCATransitionFromTop | 从顶部转场 |
kCATransitionFromBottom | 从底部转场动画子类型 |
2. 动画样例
五、CASpringAnimation
iOS9才引入的动画类,在以前我们都是使用facebook
的pop
来做这种弹簧效果,它继承于CABaseAnimation
,用于制作弹簧动画。
1. 参数说明
- mass:质量,影响图层运动时的弹簧惯性,质量越大,弹簧拉伸和压缩的幅度越大,动画的速度变慢,并且波动幅度变大。
- stiffness:刚度系数(劲度系数/弹性系数),刚度系数越大,形变产生的力就越大,运动越快。
- damping:阻尼系数,阻止弹簧伸缩的系数,阻尼系数越大,停止越快。
- initialVelocity:初始速率,动画视图的初始速度大小速率为正数时,速度方向与运动方向一致,速率为负数时,速度方向与运动方向相反如果。
- settlingDuration:结算时间 返回弹簧动画到停止时的估算时间,根据当前的动画参数估算通常弹簧动画的时间使用结算时间比较准确。
2. 例子展示
六、组动画
动画组,是CAAnimation的子类,可以保存一组动画对象,将CAAnimationGroup对象加入图层后,组中所有动画对象可以同时并发运行。
1. 参数说明
- animations属性:用来保存一组动画对象的
NSArray
注意:默认情况下,一组动画对象是同时运行的,也 可以通过设置动画对象的beginTime
属性来更改动画的开始时间。
2. 例子展示
![](http://img.e-com-net.com/image/info10/03768f49faa2421ca8b6995b7bd64386.gif)
七、一些有意思的动画样例
-
实现画线过程的动画,虽然很简单,但看到很多人都问过,效果如下:
-
利用正弦曲线做的,效果还行,相信很多人都做过:
-
左后奉上一个希望的小火苗,粒子动画,效果很惊人,游戏用的比较多,有兴趣,也可以研究下:
-
鱼在鱼池游动的动画效果:
fish动画.gif
最后的最后,奉上文章里部分例子的Demo地址:ExamplesForAnimation