3.2.2 补间动画的原理

补间动画只提供了基本的动态变换,如果想要复杂的动画效果,比如像钟摆一样左摆一下再右摆一下,补间动画就无能为力了。因而有必要了解补间动画的实现原理,这样才能进行适当的改造,使其符合实际的业务需求。

以旋转动画RotateAnimation为例,接下来进一步阐述补间动画的实现原理。查看RotateAnimation的源码,发现除了一堆构造方法外剩下的代码只有如下3个方法:

两个初始化方法都在处理圆心的坐标,与动画播放有关的代码只有applyTransformation方法。该方法很简单,提供了两个输入参数:第一个参数为插值时间,即逝去的时间所占的百分比;第二个参数为转换器。方法内部根据插值时间计算当前所处的角度数值,最后使用转换器把视图旋转到该角度。

查看其他补间动画的源码,发现都与RotateAnimation的处理大同小异,对中间状态的视图变换处理不外乎以下两个步骤:

根据插值时间计算当前的状态值(如灰度、平移距离、缩放比率、旋转角度等)。

在宿主视图上使用该状态值执行变换操作。

如此看来,补间动画的关键在于利用插值时间计算状态值。现在回头看看钟摆的左右摆动,这个摆动操作其实由3段旋转动画构成。

(1)以上面的端点为圆心,钟摆以垂直向下的状态向左旋转,转到左边的某个角度停住(比如左转60度)。

(2)钟摆从左边向右边旋转,转到右边的某个角度停住(比如右转120度,与垂直方向的夹角为60度)。

(3)钟摆从右边再向左旋转,当其摆到垂直方向时完成一个周期的摇摆动作。

清楚了摇摆动画的运动过程后,接下来根据插值时间计算对应的角度,具体到代码实现上需要做以下两处调整:

(1)旋转动画初始化时只有两个度数,即起始角度和终止角度。摇摆动画需要3个参数,即中间角度(既是起始角度也是终止角度)、摆到左侧的角度和摆到右侧的角度。

(2)根据插值时间估算当前所处的角度。对于摇摆动画来说,需要做3个分支判断(对应之前3段旋转动画)。如果整个动画持续4秒,那么0~1秒为往左的旋转动画,该区间的起始角度为中间角度,终止角度为摆到左侧的角度;1~3秒为往右的旋转动画,该区间的起始角度为摆到左侧的角度,终止角度为摆到右侧的角度;3~4秒为往左的旋转动画,该区间的起始角度为摆到右侧的角度,终止角度为中间角度。

分析完毕,下面为修改后的摇摆动画代码片段:

(完整代码见animation\src\main\java\com\example\animation\widget\SwingAnimation.java)

摇摆动画的播放效果如图3-18和图3-19所示。图3-18为钟摆向左摆动时的画面,图3-19为钟摆向右摆动时的画面。

图3-18 摇摆动画向左摆动

图3-19 摇摆动画向右摆动