一、基础知识
CAAnimation.png
二、CABasicAnimation
2. 属性值的解释
timingFunction.png
kCAMediaTimingFunctionLinear -- 在整个动画时间内动画都是以一个相同的速度来改变。也就是匀速运动。一个线性的计时函数,同样也是 CAAnimation 的 timingFunction 属性为空时候的默认函数。线性步调对于那些立即加速并且保持匀速到达终点的场景会有意义(例如射出枪膛的子弹)。
kCAMediaTimingFunctionEaseIn: 动画开始时会较慢,之后动画会加速。一个慢慢加速然后突然停止的方法。对于之前提到的自由落体的例子来说很适合,或者比如对准一个目标的导弹的发射。
kCAMediaTimingFunctionEaseOut: 动画在开始时会较快,之后动画速度减慢。它以一个全速开始,然后慢慢减速停止。它有一个削弱的效果,应用的场景比如一扇门慢慢地关上,而不是砰地一声。
kCAMediaTimingFunctionEaseInEaseOut: 动画在开始和结束时速度较慢,中间时间段内速度较快。创建了一个慢慢加速然后再慢慢减速的过程。这是现实世界大多数物体移动的方式,也是大多数动画来说最好的选择。如果只可以用一种缓冲函数的话,那就必须是它了。那么你会疑惑为什么这不是默认的选择,实际上当使用 UIView 的动画方法时,他的确是默认的,但当创建 CAAnimation 的时候,就需要手动设置它了。
kCAMediaTimingFunctionDefault: 它和 kCAMediaTimingFunctionEaseInEaseOut 很类似,但是加速和减速的过程都稍微有些慢。它和 kCAMediaTimingFunctionEaseInEaseOut 的区别很难察觉,可能是苹果觉得它对于隐式动画来说更适合(然后对 UIKit 就改变了想法,而是使用 kCAMediaTimingFunctionEaseInEaseOut 作为默认效果),虽然它的名字说是默认的,但还是要记住当创建显式的 CAAnimation 它并不是默认选项(换句话说,默认的图层行为动画用 kCAMediaTimingFunctionDefault 作为它们的计时方法)。
使用方法:
- pathAnim.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
fillMode.png
kCAFillModeForwards: 动画开始之后 layer 的状态将保持在动画的最后一帧,而 removedOnCompletion 的默认属性值是 YES,所以为了使动画结束之后 layer 保持结束状态,应将 removedOnCompletion 设置为 NO。
kCAFillModeBackwards: 将会立即执行动画的第一帧,不论是否设置了 beginTime 属性。观察发现,设置该值,刚开始视图不见,还不知道应用在哪里。
kCAFillModeBoth: 该值是 kCAFillModeForwards 和 kCAFillModeBackwards 的组合状态
kCAFillModeRemoved: 动画将在设置的 beginTime 开始执行(如没有设置 beginTime 属性,则动画立即执行),动画执行完成后将会 layer 的改变恢复原状。
尽量不要设置 removedOnCompletion = false ,因为配合 CAAnimationDelegate 会带来循环运用的问题,如果需要动画停留在最后的状态,可以直接设置 View 的 center 属性在动画结束的位置 Point
之所以会出现 循环引用 因为由于 CAAnimation 的 delegate 使用的 strong 类型: 看一下简要的说明图:
CAAnimationDelegate.png
解决有时视图会闪动一下的问题,我们可以将 layer 的属性值设置为我们的动画最后要达到的值,然后再给我们的视图添加 layer 动画。
旋转动画. gif
位移动画. gif
动画集合 - 1.gif
比例缩放动画 - 1.gif
size 大小缩放、透明值变化动画. gif
三、CAKeyframeAnimation
CAKeyframeAnimation 是核心动画里面的帧动画, 它提供了按照指定的一串值进行动画, 好像拍电影一样的一帧一帧的效果
1)kCAAnimationLinear calculationMode 的默认值, r 自定义控制动画的时间(线性)可以设置 keyTimes, 表示当关键帧为座标点的时候, 关键帧之间直接直线相连进行插值计算;
2)kCAAnimationDiscrete 离散的, 就是不进行插值计算, 所有关键帧直接逐个进行显示;
3)kCAAnimationPaced 节奏动画自动计算动画的运动时间, 使得动画均匀进行, 而不是按 keyTimes 设置的或者按关键帧平分时间, 此时 keyTimes 和 timingFunctions 无效;
4)kCAAnimationCubic 对关键帧为座标点的关键帧进行圆滑曲线相连后插值计算, 对于曲线的形状还可以通过 tensionValues,continuityValues,biasValues 来进行调整自定义, 这里的数学原理是 , 这里的主要目的是使得运行的轨迹变得圆滑, 曲线动画需要设置 timingFunctions
kCAAnimationCubicPaced 看这个名字就知道和 kCAAnimationCubic 有一定联系, 其实就是在 kCAAnimationCubic 的基础上使得动画运行变得均匀, 就是系统时间内运动的距离相同, 此时 keyTimes 以及 timingFunctions 也是无效的.
1)kCAAnimationRotateAuto 根据路径自动旋转
2)kCAAnimationRotateAutoReverse 根据路径自动翻转
CAKeyframeAnimation 路径动画. gif
三、CATransition
主要用于转场动画从一个场景以动画的形式过渡到另一个场景
另外还有一些系统未公开的动画效果:
- ["cube", "suckEffect", "rippleEffect", "pageCurl", "pageUnCurl", "oglFlip", "cameraIrisHollowOpen", "cameraIrisHollowClose", "spewEffect","genieEffect","unGenieEffect","twist","tubey","swirl","charminUltra", "zoomyIn", "zoomyOut", "oglApplicationSuspend"]
效果,就不一一列举了,可以看下效果图
3. 动画样例
CATransition 路径动画. gif
四、CASpringAnimation
iOS9 才引入的动画类,在以前我们都是使用 facebook 的 pop 来做这种弹簧效果,它继承于 CABaseAnimation,用于制作弹簧动画
CASpringAnimation 弹簧动画. gif
五、一些有意思的动画样例
实现画线过程的动画,虽然很简单,但看到很多人都问过,效果如下:
drawLine 动画. gif
利用正弦曲线做的,效果还行,相信很多人都做过:
water 动画. gif
左后奉上一个希望的小火苗,粒子动画,效果很惊人,游戏用的比较多,有兴趣,也可以研究下
fire 动画. gif
鱼在鱼池游动的动画效果:
fish 动画. gif
最后的最后,奉上文章里部分例子的 Demo 地址:
来源: