动画时间控制

2017-08-31 本文已影响10人 hehc08

前言

本文要探讨的是CoreAnimation框架是如何来控制时间的。

CAMediaTiming协议

动画所有跟时间相关的属性（duration, beginTime, repeatCount等）都来自于CAMediaTiming协议，它由CABasicAnimation和CAKeyframeAnimation的父类CAAnimation实现。协议一共定义了8个属性，通过这8个属性就能完全地控制动画时间。每个属性的文档只有短短几句话，当然你也可以通过阅读这些文档并且手动进行试验来进行学习，不过我认为更容易让人理解的方式是将时间可视化。

可视化的CAMediaTiming协议

为了向你们展示不同的时间相关属性，包括这个属性自己单独使用的效果以及和其他属性混合使用的效果，我将执行一个从橘黄色到蓝色转换的动画。下图展示了从动画开始到动画结束的进程（橘色到蓝色），每一格代表一秒，时间线上任意一点对应到图上的颜色就是视图在这一瞬间的颜色。比如，duration这个属性将被如下进行可视化展示：

duration设置为1.5秒，所以动画将耗费1秒加上1秒的一半来从橘色完全变为蓝色。

image.png
图一. 将duration设为1.5秒

默认地，CAAnimation将会在动画完成后被移除，这在上面同样被可视化出来了，一旦动画到达了结束值，它就会被从layer上移除，所以layer的背景色将会返回到modelLayer的状态（见上一章：CALayer的模型层与展示层）。在这个可视化例子中，layer本身的背景色是白色，所以你看到的上图的可视化效果中，在1.5秒后的额外的2.5秒钟的时间里layer的背景色回到了白色。

beginTime

如果我们将动画的beginTime加入到可视化效果中就能看到更多的情形。

2
图二. 将duration设为1.5秒，将开始时间设为1.0秒

将动画持续时间设为1.5秒，开始时间设为当前时间（CACurrentMediaTime()）加上1秒所以动画将在2.5秒后结束。在动画被加到layer上之后它将等待1秒然后再开始（相当于动画延迟时间为1秒）。

fillMode

如果要让动画在开始之前（延迟的这段时间内）显示fromValue的状态，你可以设置动画向后填充：设置fillMode为kCAFillModeBackwards。

3
图三、填充模式可以用来在动画开始之前显示fromValue

autoreverses

将使动画先正常走，完了以后反着从结束值回到起始值（所有动画属性都会反过来，比如动画速度，如果正常的是先快后慢，则反过来后变成先慢后快）。

4
图四. Autoreverse将使动画在结束后又回到动画开始的状态

repeatCount

相比之下，repeatCount可以让动画重复执行两次（首次动画结束后再执行一次，正如你下面将看到的）或者任意多次（你甚至可以将重复次数设置为小数，比如设置为1.5，这样第二次动画只执行到一半）。一旦动画到达结束值，它将立即返回到起始值并且重新开始。

5
图五、repeatCount让动画在结束后再次执行

repeatDuration

类似于repeatCount，但是极少会使用。它简单地在给定的持续时间内重复执行动画（下面设置为2秒）。如果repeatDuration比动画持续时间小，那么动画将提前结束（repeatDuration到达后就结束）

6
图六. repeatDuration使动画在给定时间内不停重复播放

这些属性可以结合到一起使用来实现一些动画多次重复反向（也可以在制定时间内重复反向）的效果。如下图所示：

7
图七. 把几个属性结合起来用

speed

这是一个非常有意思的时间相关的属性。如果把动画的duration设置为3秒，而speed设置为2，动画将会在1.5秒结束，因为它以两倍速在执行。

8
图八. Speed设置为2将会使动画的速度变为2倍所以3秒的动画将只用1.5秒就能执行完

speed属性的强大之处来自以下两个特点：
1、动画速度是有层级关系的
2、 CAAnimation并不是唯一的实现了CAMediaTiming协议的类。

动画速度的分层表示：
一个动画的speed为1.5，它同时是一个speed为2的动画组的一个动画成员，则它将以3倍速度被执行。

CAMediaTiming协议的其他实现

CAAnimation实现了CAMediaTiming协议，然而CoreAnimation最基本的类：CALayer也实现了CAMediaTiming协议。这意味着你可以给一个CALayer设置speed为2，那么所有加到它上面的动画都将以两倍速执行。这同样符合动画时间层级，比如你把一个speed为3的动画加到一个speed为0.5的layer上，则这个动画将以1.5倍速度执行。
控制动画和layer的速度同样可以用来暂停动画，你只需要把speed设为0就行了。结合timeOffset属性，就可以通过一个外部的控制器（比如一个UISlider）来控制动画了，我们将在这一章较后的内容中进行讲解。

timeOffset

timeOffset这个属性，一开始看起来挺奇怪的，光看名字的话，看起来应该是一个用来控制动画时间进程（计算动画当前状态）的属性。下面这个可视化展示了一个持续时间为3秒，动画时间偏移量为1秒的动画。

图9.你可以偏移整个动画但是动画还是会走完全部过程。

这个timeOffset可能是这几个属性中比较难理解的一个,官方的文档也没有讲的很清楚。你将一个动画看作一个环，timeOffset改变的其实是动画在环内的起点，比如一个duration为5秒的动画，将timeOffset设置为2，那么动画的运行则是从原来的2秒开始到5秒，接着再0秒到2秒，完成一次动画.

这个动画将从正常动画（timeOffset为0的状态）的第一秒开始执行，直到两秒后它完全变蓝，然后它一下子跳回最开始的状态（橙色）再执行一秒。就像是我们把正常动画的第一秒给剪下来粘贴到动画最后一样。
这个属性实际上并不会自己单独使用，而会结合一个暂停动画（speed=0）一起使用来控制动画的“当前时间”。

暂停的动画将会在第一帧卡住，然后通过改变timeOffset来随意控制动画进程，因为如上图所示，动画的第一帧就是timeOffset指定的那一帧。
举个例子：比如一个改变位置的动画，让一个视图从(0,0)移动到(100,100)，持续时间为1秒。如果先暂停动画，然后设置timeOffset为0.5，那么首先动画会卡在“第一帧”，而第一帧由timeOffset决定，也就是动画正常运作时间进行到0.5秒的那一帧就是“第一帧”，这时候动画就会停在(50,50)的地方。注意timeOffset是具体的秒数而不是百分比。

控制动画时间

结合使用speed和timeOffset属性可以轻松控制一个动画当前显示的内容。为了方便起见，我将把动画持续时间设为1秒。timeOffset/duration这个分数的值表示动画进行的百分比，把duration设为1的话，在数值上timeOffset就等于动画进程百分比了。

Slider

我们首先创建一个CABasicAnimation来创建一个改变layer背景颜色的动画并把它添加到layer上，然后把layer的speed属性设为0来暂停动画。

CABasicAnimation *changeColor =
   [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
changeColor.fromValue = (id)[UIColor orangeColor].CGColor;
changeColor.toValue   = (id)[UIColor blueColor].CGColor;
changeColor.duration  = 1.0; // For convenience

[self.myLayer addAnimation:changeColor
                   forKey:@"Change color"];

self.myLayer.speed = 0.0; // Pause the animation

然后在slider被拖动的action方法中，我们把slider的当前值（默认0到1，刚好也是动画timeOffset的范围）设为layer的timeOffset的值。

- (IBAction)sliderChanged:(UISlider *)sender {
    self.myLayer.timeOffset = sender.value; // Update "current time"
}

这样的效果就像我们通过拖动一个slider来改变一个layer的背景颜色。

20160607172601324.gif