Hype中如何使用后方运动曲线模拟物体运行上坡的动画

在上一章节中，介绍了Hype 4交互动效制作软件中弹性运动曲线以及通过一个案例——菜单栏飞入场景的动画，讲述了弹性运动曲线动画中的效果。本章节将讲述Hype 4 HTML5创作工具后方运动曲线，以及如何使用后方运动曲线模拟物体运行上坡的动画。

一、后方运动曲线（Back）

所谓后方运动实质是运动对象快速向前运动，在略微超出终点后，再返回到终点这样一个运动过程。后方运动是弹性运动的简化版。

图1：后方运动曲线

通过添加锚点，并移动锚点的位置，可以调整后方运动曲线，从而使前段运动速度更快，提升或者降低返回的运动速度。

图2：自定义后方运动曲线

与退还和弹性运动曲线一样，可以倒序后方运动曲线，就像对录像带进行倒放一样。

图3：倒序后方运动曲线

二、应用案例

1、案例设计

模拟物体经过直线运动后上坡，然后溜后静止这样一个动画过程。

图4：动画场景

2、设计运动路径

整个运动过程分为两部分，前一部分为水平移动，持续时间为1s20帧，是一个加速运动；后一部分为斜坡运动，持续时间为1s10帧，所以整个运动的持续时间为3s。

两段运动过程意味着两段运动路径，所以必须在水平与斜坡拐点处添加属性的原点（上）和原点（左）关键帧，这样才能在同一段时间线上，设置成两种运动状态。

图5：设计运动路径

3、设计运动曲线

双击属性原点（左）前一段时间线，添加渐入运动曲线，模拟加速运动。然后分别双击后一段原点（左）和原点（右）时间线，添加后方运动曲线，模拟物体加速冲上斜坡后停止、溜后，然后再停止的过程。

注意，可以通过调整后方的运动曲线，使前后两段的运动速度衔接上，不会出现对象冲上斜坡时，突然有一个加速的现象。

图6：设计运动曲线

总体动画效果

图7：完整运动效果

三、总结

小编花了整整七个章节来讲述Hype预设的7种运动曲线，也意味着根据这七种运动曲线可以设计七种运动效果——线性（匀速运动）、渐入（加速运动）、渐出（缓冲运动）、渐入渐出（加速缓冲运动）、退还（弹跳运动）、弹性（震荡运动）以及后方（返回运动）。

通过前面的讲述，使用这七种预设的运动的时候，只要设置了对象的运动持续的时间、运动路径和运动曲线，对象就可以运动了。但是，小伙伴有没有想过，运动的三大要素——路程、速度和时间，在这些运动中是如何体现的呢？

下一章节，将讲述运动函数——数学公式，从原理上探讨HTML5的运动原理，敬请期待。