第30页
animate Motion
让图像沿着某条轨迹运动的动画由animate Motion完成，它的书写方式比较特殊。如果要定义运动轨迹，那么首先要绘制该轨迹。绘制完毕后，再将其贝塞尔曲线作为animate Motion的path值导入。
所以请在*Adobe *Illustrator中使用钢笔工具自制一条轨迹，然后按照如下规则进行轨迹的替换。其中代码开始位置的是轨迹展示，其引用于rect的animate Motion中。
c52.3-16.3,39-144.4,88-156c59.1-14,120.3,162.4,210,155c32.8-2.7,57.5-29,73-50"stroke=#841A1A fill="none"/>
path="M52,1521c49,68.5,108.7,136.2,151,123
c52.3-16.3,39-144.4,88-156c59.1-14,120.3,162.4,210,155c32.8-2.7,57.5-29,73-50"
rotate="auto"
dur="2.5s" repeat Count="indefinite">
其中rotate="auto"的意义在于确定形状运动的朝向。比如我们设计一个飞机沿地表路线飞行的动画，毫无疑问机头必须指向当前切线方向。
将代码复合
至此，你已经学习了白名单中的全部特效表达，看似都十分简单明确，但如何实现效果显著的交互案例呢？答案就是对代码进行复合。
实际上，大多数动效并不是单一的，而是多种动效组合产生的结果。我们以一个世界杯主题的小游戏为例，来看一个大型作品如何逐步拼装完成。请在JZCreative公众号中回复“svg0107”，先体验一下。
这个复杂案例基本融合了白名单中最重要的几种动效设计，我们简要解读如下。
在整个画面背景中，观众看台的闪光灯通过opacity实现。不过其鳞次栉比的效果，是通过将一个dur中多个values设置为0的方式，使它们在每个循环内熄灭一段时间实现的。
接下来，画面出现的是下坠的足球、展板等元素。这几个要素的显著特征是弹跳感。这须通过路径本身的折返和中途values的长度差异实现。
足球的运动及触发后的飞行动效，是本作品中最复杂的交互结构。球体本身由诸多路径组成，涉及以下动画：
· 自转；
· 横向移动到画布内并离开画布；
· 点中后最初的自转停止；
· 点中后横向移动停止；
· 点中后新的自转开始；
· 点中后发生位置移动（直线或沿轨迹）；
· 点中后球体逐步缩小；
· 抵达路径终点时自转停止；
· 抵达终点后慢慢消失。
一共9个动画，其中7个涉及触发。
其中1号出现的足球动画相关代码如图3-21所示。
图3-21 足球动画相关代码
这么长的动效复合并不是一蹴而就的，而是按顺序逐步添加的。
第一步，我们并不需要足球支持点击触发，而是实现球体自转并从右侧滚入屏幕再离开。就rotate和translate而言，如果两者直接平行组合就会形成一个螺旋动画，因为rotate需要指定中心点。
这里我们采用一个更讨巧的办法。
1.将足球固定在画布左上角，以画布原点为圆心进行旋转，所以我们看到这段代码中的球体旋转动画如下。
其中的end参数是之后要解决点击后停止的效果，不必在第一步添加。
2.在足球外增加一个标签，对整个群组设置位移动画。
这样我们就可以避免rotate和translate互相发生关系。为什么在代码的开头，你没有看到后续足球出现在屏幕左上角？因为笔者最后通过一个白色rect直接覆盖了右上方，把后面的所有足球都挡住了。
第二步，确定足球将直接发生的后续动画，包括透明度、缩放、新的自转等，它们都被写入了和足球初始自转平行的代码区。