偶然间在CocoaChina上看到了一个动画类的文章，还有支付宝咻一咻的动图。俗话说，自己动手，丰衣足食，从而就出现了下面这个动图（动图做的稍有偏差）。源代码查看仿支付宝咻一咻。
其实这个功能实现起来并不是很困难，我是用的最笨的办法，创建了三个图层，利用定时器来控制不同图层添加动画的不同时间。可以先添加一个图层来实现类似的效果。
显而易见的是，在单个图层的动画中，包括大小的变化和透明度的变化，这个时候就需要一个动画组CAAnimationGroup，将不同的动画添加到数组中负值给CAAnimationGroup唯一的属性animations之后，所有的动画就可以并发执行。需要注意的是，动画组中的动画不会被压缩，所以超出动画组时常的部分将要被剪掉。在设置动画组的时候还需要提到的一个是CAMediaTimingFunction —— 速度控制函数，顾名思义，就是用来控制动画的执行速度效果的。他包括以下几种类型：
kCAMediaTimingFunctionLinear（线性）：匀速，给你一个相对静态的感觉
kCAMediaTimingFunctionEaseIn（渐进）：动画缓慢进入，然后加速离开
kCAMediaTimingFunctionEaseOut（渐出）：动画全速进入，然后减速的到达目的地
kCAMediaTimingFunctionEaseInEaseOut（渐近渐出）：动画缓慢的进入，中间加速，然后减速的到达目的地。这个是动画的默认行为
kCAMediaTimingFunctionDefault（默认）：同上
说完动画组接下来就是更重要的添加到动画组中的动画了。我在写demo的过程中用了两种，分别是CABasicAnimation和CAKeyframeAnimation。
先说一下他们的共同的属性，如下：
duration：动画的时长
repeatCount：重复的次数
repeatDuration：设置动画的时间。在该时间内动画一直执行，不计次数。
beginTime：指定动画开始的时间。从开始延迟几秒的话，设置为【CACurrentMediaTime() +秒数】的方式
timingFunction：设置动画的速度变化
autoreverses：动画结束时是否执行逆动画
一些常用的animationWithKeyPath值的总结:
transform.scale：比例转化，例如：@(0.8)
transform.scale.x：宽的比例，例如：@(0.8)
transform.scale.y：高的比例，例如：@(0.8)
transform.rotation.x：围绕x轴旋转，例如：@(M_PI)
transform.rotation.y：围绕y轴旋转，例如：@(M_PI)
transform.rotation.z：围绕z轴旋转，例如：@(M_PI)
cornerRadius：圆角的设置，例如：@(50)
backgroundColor：背景颜色的变化，例如：(id)[UIColor purpleColor].CGColor
bounds：大小，中心不变，例如：[NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
position：位置(中心点的改变)，例如：[NSValue valueWithCGPoint:CGPointMake(300, 300)];
contents：内容，例如：UIImageView的图片imageAnima.toValue = (id)[UIImage imageNamed:@"to"].CGImage;
opacity：透明度，例如：@(0.7)
contentsRect.size.width：横向拉伸缩放，例如：@(0.4)最好是0~1之间的
接下来就是他们的区别了：CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue)，而CAKeyframeAnimation会使用一个NSArray保存这些数值，如下：
values：就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内，依次显示values数组中的每一个关键帧
keyTimes：可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的。
其实CABasicAnimation可看做是最多只有2个关键帧的CAKeyframeAnimation。
代码对比如下：
创建完动画之后，将动画添加到图层上就可以实现单个图层的动画了，那么想要实现类似支付宝咻一咻的动画需要怎么做呢？前面也说了，我用的是最笨的方法，创建了三个图层，通过定时器来控制不同图层的动画执行时间。这里需要注意的一点就是动画的时长duration、图层的个数还有定时器的时间是相互牵制的，不然就会出现每个图层出现的很混乱的结果。想要什么样的效果就自己慢慢调吧。
网友评论