基础教程：Hype 4时间线之回放和循环时间线

在上一章节，讲述了Hype 4交互动效制作软件编辑时间线和如何控制时间轴的回放方向。本章节继续讲述在这款H5制作软件中，如何模仿播放控制器的循环功能，以及如何实现循环时间轴。

一、模拟播放控制器的循环播放按钮的功能

Hype 4播放控制器的循环按钮实质是不断地循环从起点到终点的运动效果。例如图1中，按下播放控制器的循环按钮，矩形就不断地循环重复从左到右的水平移动动画。

图1：Hype 4的循环播放功能

但是，Hype 4播放控制器的循环功能只能在Hype软件中有效，如果把场景加载到浏览器中，运动只会执行一次，循环是无效的。要实现在浏览器中，矩形的运动与在Hype 4中的循环播放的效果一样，则需要使用到“时间线操作”。

在时间线终点添加时间线操作点，在“Timeline Action”界面，“操作”选择“开始时间线”，“时间线”选择“主时间线”即可。在浏览器中，矩形就会不停地从左到右移动。

图2：浏览器模拟播放器的循环功能

二、实现来回运动

小伙伴应该还记得前面几个章节举的例子，就是矩形向右运行到终点，然后又按原路径返回起点，这个运动效果是通过路径折返的方式实现的。

图3：路径折返实现来回运动

如果路程简单，使用路程折返的方式没有问题。但是如果路程复杂，再使用路程折返的方式则会非常麻烦而且未必能完全重复原来的路径。那么，是否能不使用路径折返的方式实现来回运动呢？答案是可以的，只要在时间线终点添加时间线操作点即可。

时间指示器移动到时间线终点位置，点击添加“时间线操作”，在“Timeline Action”界面，“操作”选择“开始时间线”，“时间线”选择“主时间线”并且选择“倒序播放”即可。

把场景加载到浏览器中，就可以看到矩形先从左运行到右边终点，然后又沿原路径返回到起点。

图4：时间线操作实现来回运动

三、实现循环时间轴

这里所谈论的循环时间轴，不是实现播放控制器的循环按钮的功能，而是在运动来回的基础上，实现循环来回运动。

上面已经讲述了来回运动是通过在运动终点添加“倒序播放”的时间线操作点实现，那么实现这样的循环来回运动效果，在运动起点也添加时间线操作点，不要选择“倒序播放”即可。

图5：实现循环时间轴

四、小结

循环运动在动画制作中非常重要，通过在时间线的起点和终点添加“时间线操作”点，就可以实现从起点到终点的循环或者从起点到终点又到起点的循环运动。

下一章节，将讲述绝对关键帧和相对关键帧的内容，敬请期待。