3.3 延时动画

延时动画和时间联系在一起，在规定的时间里，节点从一个状态变化到另一个状态，如移动动画 MoveBy、旋转动画 RotateBy 和缩放动画 ScaleTo 等，它们有一个共同的基类ActionInterval，继承自该类的动画都是延时动画。

对于延时动画，好多都有两个版本（By和To），如MoveBy和MoveTo。对于By类型的动画，它是相对节点当前状态的一种动画，而对于 To 类型的动画，它没有将节点的当前状态计算在内，是一种绝对动画。对于这两者的区别，如程序片段3-10所示。

节点pSprite的初始位置是（300，320），运行MoveBy动画，在 X 轴上移动了100个像素，而在 Y 轴上没有移动，则该节点的最终位置是（400，320）。而对于 MoveTo 动画，不管 pSprite 节点的初始位置在什么地方，执行该动画后，它的最终位置是（500，320）。程序片段3-9演示了By和To的区别，对于其他这种类型的动画也是与此相似的。

3.3.1 移动动画

移动动画控制节点的位置，使其位置发生改变，有MoveBy和MoveTo两种类型，它的创建如程序片段3-11所示。

如果初始节点的位置在（200，200），则该节点分别执行这两个动画，动画完成后其效果如图3-3所示。

图 3-3 中，左边的图是在（200，200）的初始位置，中间的图是执行了 MoveBy 动画的结果，位置在（330，200）处，右边的图是执行动画 MoveTo 的结果，位置在（460，200）处。

3.3.2 旋转动画

旋转动画有两种类型：RotateBy和RotateTo，具体使用如程序片段3-12所示。

如果一个节点开始是没有旋转的状态，那么分别执行这两个动画后，其效果如图 3-4所示。

图 3-4 中，左边的图是正常状态的效果；中间的图是执行了 RotateBy 动画后的效果，顺时针旋转了30°；右边的图是执行了RotateTo动画后的效果，逆时针旋转了30°。

3.3.3 缩放动画

缩放动画是对一个节点进行放大与缩小的操作，动画类型有 ScaleBy 和 ScaleTo，具体使用如程序片段3-13所示。

执行这两个动画后的效果如图3-5所示。

图3-5 中，中间的图是执行了ScaleBy 动画的效果，右边的图是执行了ScaleTo 动画的效果图。

3.3.4 扭曲动画

扭曲动画包括SkewBy和SkewTo，具体使用如程序片段3-14所示。

一个节点分别执行这两个动画后，其效果如图3-6所示。

左边的图是对照图，中间的图是执行了SkewBy动画的效果图，右边的图执行了SkewTo动画的效果图。

3.3.5 跳跃动画

跳跃动画有 JumpBy 和 JumpTo。在动画的执行过程中，跳跃动画调用的是节点函数setPosition。对于JumpBy动画，创建它的原型如程序片段3-15所示，JumpTo动画的创建参数与之类似。

其中，参数解释如下。

（1）duration：动画持续的时间。

（2）position：对于JumpBy动画，目标位置是初始位置加上position，而对于JumpTo，则是跳跃动画的最终位置。

（3）height：每次跳跃的高度。

（4）jumps：跳跃的次数。

对于跳跃动画的使用，如程序片段3-16所示。

如果一个节点的初始位置在（200，200），执行 JumpBy 动画，跳跃高度为 30，次数为10次，最终会停在（300，200）的位置。而对于JumpTo动画，跳跃高度为20，次数同样为10次，最终会停在（300，300）的位置。

3.3.6 淡入淡出动画

淡入淡出动画改变的是节点的透明度，对应于节点的setOpacity 函数。它有3 个相应的动画：FadeTo 动画、淡入动画 FadeIn 和淡出动画 FadeOut。其中，FadeTo 动画是渐变某个节点到指定的透明值；FadeIn 动画执行完成后，该节点的透明度值为 255，完全显示；而FadeOut 动画执行完成后，节点的透明度值为 0，完全不显示。这 3 者的继承关系如图 3-7所示。

对于这3种动画的使用，如程序片段3-17所示。

如程序片段 3-15 所示，FadeTo 动画除了时间参数外，还有透明度值，而其他两个动画则只有一个时间参数。

3.3.7 Tint动画

Tint 动画改变的是颜色值，对应于节点的 setColor 函数，有两种类型：TintBy 和TintTo，这类动画的使用如程序片段3-18所示。

一个节点在分别执行完这两个动画后，其效果如图3-8所示。

图 3-8 中，中间的图是运行 TintBy 动画后的效果图，右边的图是运行 TintTo 动画后的效果图。

3.3.8 Blink动画

Blink 动画类似一个人不停地眨眼，它改变的是节点的可视性，具体使用如程序片段3-19所示。

程序片段 3-19 创建一个动画效果是，在 20s 的时间内，让结点显示，然后隐藏，反复进行这种动作20次，相当于在1s的时间内，半秒处于显示状态，半秒处于隐藏状态。

3.3.9 Bezier动画

Bezier动画让一个节点根据构建的Bezier曲线运动，它有BezierBy和BezierTo两种类型。构建曲线的坐标点通过类型 ccBezierConfig 来配置，该结构的定义如程序片段 3-20所示。

所以，在创建 Bezier 动画时，先要配置该结构，BezierTo 动画的具体使用如程序片段3-21所示，BezierBy动画的使用类似。

程序片段 3-21 让节点 Sprite 在一条 Bezier 曲线上运动，在 2s 的时间内，从位置（330，200）运动到位置（630，200），运动的曲线如图3-9所示。

3.3.10 DelayTime动画

DelayTime 动画比较简单，是让一个节点在执行动画的过程中，执行到这个动画时停顿一定的时间，然后再执行下一个动画，具体使用如程序片段3-22所示。

程序片段3-22演示了先让节点pSprite运行MoveBy动画，然后运行DelayTime动画，这个动画是停止2.0s的时间，当DelayTime动画执行完成后，再执行MoveTo动画。

3.3.11 重复动画

重复动画有两种：Repeat和RepeatForever。它们的共同点是，都是让另一个动画重复执行，而两者的区别是，前者有次数限制，后者会一直运行，它们的具体使用如程序片段3-23所示。

程序片段3-23中的两个动画都演示了让一个节点在2s的时间内旋转90°，然后重复执行此动作。对于Repeat动画，在执行完10次后，该动画就停止了，而对于RepeatForever动画，就会永远地执行下去。这两者的另一个区别是，对于 Repeat 动画，只要是继承自FiniteTimeAction 的动画，都可以让它重复执行，而对于 RepeatForever 动画，只有继承自ActionInterval的动画才可以重复执行。

3.3.12 Sequence动画

Sequence 动画的作用是让其他执行的动画排成一个队列，然后顺序地执行它们，过程如图3-10所示。

从图3-10中可以看出，在时间轴上，先让节点执行动画1，执行动画2，然后再执行下一个动画，直到所有动画执行完成，具体使用如程序片段3-24所示。

程序片段 3-24 的作用是，让 Sprite 节点顺序地执行 MoveBy 动画，然后执行 RotateTo动画，最后执行 CallFunc 动画。其中，CallFunc 动画执行函数是一个 lambda 表达式，只是向控制台输出log信息。

3.3.13 Spawn动画

Spawn 动画和 Sequence 动画类似，可以把多个动画组合在一起，然后让它们执行。区别在于，Sequence动画是顺序执行，而Spawn动画是在同一时间内所有的动画同时执行，执行过程如图3-11所示。

从图 3-11 中可以看出，当一个节点执行 Spawn 动画时，在同一时刻，动画 1、动画 2 和其他动画是同时执行的。对于Spawn动画的使用，可以把Sequence动画定义的程序片段改成如程序片段3-25所示的代码。

当Sprite节点运行Spawn动画时，MoveBy、RotateTo和CallFunc这3个动画会同时运行，即在移动的过程中又会旋转，同时又可以看到控制台打印出log信息。

对于 Spawn 和 Sequence 这两个动画，可以交叉使用，即 Spawn 动画中可以加入Sequence动画，反之也可以。同样，以上面介绍的3个动画为例，两者的混合使用如程序片段3-26所示。

程序片段3-26中，Spawn动画包含有MoveBy和RotateTo两个动画，而Sequence动画中包含动画 Spawn 和 CallFunc 动画。两者的配合使用，能够产生很多的动画效果，希望读者在使用的过程中慢慢体会。

3.3.14 序列帧动画

序列帧动画由多张图片组成，每隔一段时间换一张图片显示，类似胶片电影。创建序列帧动画有两个相关的类：Animation 和 Animate，它们之间的关系是，通过多个 SpriteFrame来创建Animation，而Animate动画则通过Animation来创建。序列帧动画的具体使用如程序片段3-27所示。

程序片段3-27中，首先通过SpriteFrameCache类把以plist形式存储的序列帧图片信息加载到帧缓存中，这个帧动画由两帧组成，将这两帧动画提取后，存储在 Vector 容器中。Animation 创建时，第一个参数就是存储帧的容器。最后创建 Animate 动画让 Sprite 节点运行，运行该程序片段后，可以在窗口看到这个序列帧动画。

3.3.15 进度动画

进度动画可以应用在很多方面，如资源的加载、玩家的血条、升级经验的进度等。实现这类动画的类为ProgressTo和ProgressFromTo，这类动画作用在ProgressTimer节点上，通过动画的方式来显示该节点的百分比。在讲解两个进度动画之前，先来讲解一下 ProgressTimer节点。

ProgressTimer节点有两种类型，定义如程序片段3-28所示。

对于 RADIAL 进度方式，当指定 MidPoint 后，会以该点为基础，顺时针逐渐显示该进度图片，而对于BAR，会在水平或者垂直方向上进行进度改变。

ProgressTimer节点是用于进度显示用的，它的部分函数如表3-2所示。

这里要着重讲解setMidpoint 和setBarChangeRate 这两个函数。对于RADIAL 类型的进度，只被 setMidpoint 函数影响，setBarChangeRate 函数对这种类型的进度没影响。而对于BAR类型的进度，被这两个函数影响。

1.RADIAL类型进度

RADIAL类型的进度，setMidpoint函数设置后，则它以这个点为中心，顺时针或者逆时针逐渐显示进度图片，实现方式如程序片段3-29所示。

程序片段 3-26 中定义了一个 ProgressTimer 节点，然后让该节点运行 ProgressTo 动画，节点的Midpoint设置为（0.2，0.5）。通过设置不同的Midpoint，效果如图3-12所示。

图3-12中，第一张图的效果是100%的显示效果，其他4张是80%的显示效果。其中，除第一张图外，其他 4 张图的 Midpoint 分别是（0.2，0.5）、（0.8，0.5）、（0.5，0.3）和（0.5，0.7）。图中的进度都是顺时针显示进度，也可以通过 setReverseProgress 函数来设置让其逆时针显示。

对于这种类型的进度，在实际运用过程中，一般把Midpoint的值设置为（0.5，0.5），即从进度的中心位置开始，然后通过setReverseProgress函数来设置是顺时针还是逆时针变化。

2.BAR类型进度

对于BAR类型的进度条，它受到setMidpoint和setBarChangeRate这两个函数的影响，对于setMidpoint设置值的效果如表3-3所示。

Midpoint 值表示进度变化的起点，除了表中所给的值外，还可以为其他值，如（0.5，0.5）表示进度向四周开始变化，变化的方向要根据setBarChangeRate来判断，当为（0，1）时，表示在 y 方向上从中间位置同时向上下两个方向变化。

对于 setBarChangeRate 函数设置的值，当为（1，0）时，表示在 x 方向上变化；为（0，1）时，表示在 y 方向上变化；为（1，1）时，则同时在两个方向上变化。当然也可以为其他值，如（0.2，0.8），但对于这些值，用处不大。

综合这两个函数设置的属性值，对于几种常用的BAR进度，其值如表3-4所示。

对于表3-4中的4种情况，当进度为80%时，效果如图3-13所示。

图3-13中，除第一张图是100%的对照图外，其他4个从左到右对应于表3-4中从上到下的参数。对于BAR类型的进度条，具体创建如程序片段3-30所示。

前文对ProgressTimer节点进行了讲解，程序片段3-30也演示了ProgressTo的使用，它通过设置时间和目标百分比实现动画。进度动画中还有一个类 ProgressFromTo，它与ProgressTo 的不同之处是可以设置从一个进度到另一个进度的变化，使用方式如程序片段3-31所示。

程序片段 3-31 演示了在 5s 的时间内，让 ProgressTimer 节点从 30%的进度变化到80%。

对于这两个动画的使用比较简单，关键是要理解 ProgressTimer 节点的使用，并且正确理解Midpoint和BarChangeRate的含义。 f2MFObu2FMUeMoCRLgVV8aEbNVBJtIbigOqyrJpl5tRLnzi8IkvWW57BJ5CUSyH6