iOS动画浅汇

转自：http://www.cocoachina.com/ios/20160311/15660.html

在iOS开发中，制作动画效果是最让开发者享受的环节之一。一个设计严谨、精细的动画效果能给用户耳目一新的效果，吸引他们的眼光 —— 这对于app而言是非常重要的。我们总是追求更为酷炫的实现，如果足够仔细，我们不难发现一个好的动画通过步骤分解后本质上不过是一个个简单的动画实现。本文就个人搜集的一些动画相关的理论和实践知识做个小结，不足之处请勿见怪。

理论 UIview VS UIlayer

UIView只是CALyer之上的封装，更准确的来说，UIView是CALyer的简版封装，加上事件处理的集合类。 CALayer是QuartzCore库内的类，是iOS上最基本的绘制单元。其次，我们知道iOS平台的Cocoa Touch 是源于OS X平台的Cocoa)，是在Cocoa的基础上添加了适用于移动手机设备的手势识别、动画等特性；但从底层实现上来说，Cocoa Touch与Cocoa共用一套底层的库，其中就包括了QuartCore.framework；但QuartCore.framework一开始就是为OS X设计的，所以其中有部分特性是不适合做移动设备开发的，比如最重要的坐标系统。因此，我们也就不难理解为何UIView/NSView在CALayer上做了一层封装。

基于UIView实现的动画

简单的Block动画

UIView

 

 

弹性动画

关键帧动画（中间可以添加合适多的帧来做不同的衔接动画）

 

CALayer动画

常用属性 

duration : 动画的持续时间

beginTime : 动画的开始时间 

repeatCount : 动画的重复次数 

autoreverses : 执行的动画按照原动画返回执行 

timingFunction : 控制动画的显示节奏，系统提供五种值选择， 分别是 

 

• kCAMediaTimingFunctionLinear 线性动画

• kCAMediaTimingFunctionEaseIn 先慢后快（慢进快出）

• kCAMediaTimingFunctionEaseOut 先块后慢（快进慢出）

• kCAMediaTimingFunctionEaseInEaseOut 先慢后快再慢

• kCAMediaTimingFunctionDefault 默认，也属于中间比较快

path：关键帧动画中的执行路径 

type：过渡动画的动画类型，系统提供了四种过渡动画：

• kCATransitionFade 渐变效果

• kCATransitionMoveIn 进入覆盖效果

• kCATransitionPush 推出效果

• kCATransitionReveal 揭露离开效果

subtype : 过渡动画的动画方向

• kCATransitionFromRight 从右侧进入

• kCATransitionFromLeft 从左侧进入 

• kCATransitionFromTop 从顶部进入 

• kCATransitionFromBottom 从底部进入

基础动画主要提供了对于CALayer对象中的可变属性进行简单动画的操作。比如：位移、透明度、缩放、旋转、背景色等等。 重要属性 fromValue ： keyPath对应的初始值 toValue ： keyPath对应的结束值。

• 基础动画（CABaseAnimation） 0:1 1:0 实现下拉剪头的展开和收起

• 关键帧动画（CAKeyframeAnimation） CAKeyframeAnimation和CABaseAnimation都属于CAPropertyAnimatin的子类。CABaseAnimation只能从一个数值（fromValue）变换成另一个数值（toValue）,而CAKeyframeAnimation则会使用一个NSArray保存一组关键帧。 重要属性 values ： 就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内，依次显示values数组中的每一个关键帧 path ： 可以设置一个CGPathRefCGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path，那么values将被忽略。 keyTimes ： 可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的。

• 组合动画：

• 过渡动画（CATransition） 多数为私有的API使用后无法上架app。 私有API提供了其他很多非常炫的过渡动画，比如@”cube”、@”suckEffect”、@”oglFlip”、 @”rippleEffect”、@”pageCurl”、@”pageUnCurl”、@”cameraIrisHollowOpen”、@”cameraIrisHollowClose”等。

粒子动画

transform动画

transform是一个非常重要的属性，它在矩阵变换的层面上改变视图的显示效果，完成旋转、形变、平移等等操作。在它被修改的同时，视图的frame也会被真实改变。有两个数据类型用来表示transform，分别是CGAffineTransform和CATransform3D。前者作用于UIView，后者为layer层次的变换类型。基于后者可以实现更加强大的功能。 对于想要了解矩阵变换是如何作用实现的，可以参考这篇博客： CGAffineTransform 放射变换

在开始使用transform实现你的动画之前，我先介绍几个常用的函数：

transform严格的说不是一种动画，而是动画中的一部分操作，我拿出来说是因为它同时出现在了UIView 动画和CALayer动画中。

一些应用

利用上面CALayer 基础动画的代码实现下拉剪头的展开和收起，还可以实现时钟指针的旋转

输入框在输入错误信息时的摇晃效果。

利用CAShapeLayer 和CABasicAnimation 可以实现加载动画。

iOS渲染视图的层级图： 

更多内容可以点击 iOS开发UI篇--iOS动画（Core Animation）总结。

事实告诉我们动画是要靠设计的，你看我上面的动画抽的一笔，但事实上用同样的代码可以写出很漂亮的动画。