利用Hype制作汽车驾驶的动态路线图

在一些电视节目里，为了保护隐私，经常会使用动画来展现当前地点与目的地的行走路径，比如图1所示的简单汽车驾驶路径。

在本文中，我们会利用Hype制作这一驾驶路径效果，除了动态的移动效果外，我们还会在动画中加入Hype的鼠标点击动作，以实现点击不同元素呈现不同驾驶路径的效果。

一、制作时间线

简单准备场景如图2所示，其中包含汽车以及学校、游乐场与家的地点图案，不同地点间有简单的路径指示。

图2：场景准备

接下来，我们需要为不同的驾驶路径创建时间线。

如图3所示，单击时间线管理面板的新建按钮。

图3：新建时间线

然后，如图4所示，分别创建学校、游乐场、家的时间线。

图4：完成时间线的创建

接着，返回到时间线编辑面板，如图5所示，将当前时间线切换到“学校”时间线。

图5：切换时间线

在“学校”时间线基础上，进行如下操作：

1. 打开Hype的自动记录功能

2. 将时间线上的指针移动到目标时间点

3. 将汽车移动到学校附近

图6：制作学校路径

完成“学校”时间线的编辑后，如图7所示，将时间线切换为“游乐场”时间线，并完成以下操作：

1. 打开Hype的自动记录功能

2. 将时间线上的指针移动到目标时间点

3. 将汽车移动到游乐场附近

图7：制作游乐场路径

重复以上步骤，如图8所示，完成“家”时间线的编辑。

图8：制作家路径

二、添加鼠标点击动作

完成时间线的编辑后，接下来，进行鼠标点击动作的设置。我们希望获得的效果是，当点击学校图案时，启动“学校”时间线，以呈现汽车驶向学校的动画效果。

具体的操作是，如图9所示，选中学校图案后，在操作检查器的“鼠标点按时”操作中添加“开始学校时间线”的操作。

图9：添加点击学校动作

接着，如图10所示，选中游乐场图案后，在操作检查器的“鼠标点按时”操作中添加“开始游乐场时间线”的操作。

图10：添加点击游乐场动作

重复以上操作，如图11所示，完成家图案的鼠标点击操作设置。

图11：添加点击家动作

完成以上设置后，我们来预览下动画效果，可以看到，虽然可以呈现出汽车驾驶到不同地点的路径，但每完成一次动作，汽车都会返回原点。

为了解决汽车返回原点的问题，如图13所示，可以在时间线管理面板中，勾选时间线右侧的“相对的”选项，让汽车驶向某个位置后，保持不动，呈现连续的路径。这样我们就完成了文章开头预览中的效果。

图13：勾选相对的时间线

三、小结

综上所述，通过在Hype中设置不同的时间线，可在同一场景下制作不同的动画效果，同时，通过添加动作触发时间线，还可以控制不同动画出现的时机。