Hype的动作功能,可将不同场景、时间线等通过具体的动作(如鼠标单击、鼠标悬停等)连接起来,使得各种场景之间具有交互性。
本文将通过如图1所示的简单追逐小游戏(单击移动中的按钮,触发鼠标单击动作,然后跳转到下一个场景),来具体演示下动作功能的使用方法。
一、创建运动路径
我们先制作按钮对应的动画,如图2所示,创建按钮形状。
并输入“点击惊喜”的文本。
接着依次完成以下操作:
1. 打开Hype的自动记录功能
2. 将时间线上的指针移动到目标时间点
3. 将按钮移动到靠近右下角的位置
完成简单的移动动画记录后,如图5所示,通过添加锚点、移动锚点的方式,调整动画的运动路径,使其变得无规律,提高追逐的难度。
二、制作点击操作
完成移动按钮的制作后,接下来,我们需进行鼠标点击动作的设置。
如图6所示,选中按钮,并打开操作检查器。
然后,如图7所示,添加“鼠标点按时”动作,并将其操作设置为“跳到场景”。
然后,如图8所示,将其跳转场景设为“下一个场景”,并将其过渡方式设为“即时”。
三、制作下一个场景
完成以上操作后,我们还需要进行下一个场景的制作。
如图9所示,单击场景右侧的添加按钮,创建新场景。
然后,如图10所示,在新创建的场景中插入图像。
完成图片的插入后,适当调整图片的大小(调整边缘)。
四、制作循环动画
最后,为了让按钮持续移动直至触发鼠标单击动作,如图12所示,单击“添加时间线操作”按钮。
如图13所示,在按钮移动动画的末帧处添加一个“开始主时间线”的操作,即可获得本文开头的追逐小游戏动画。
三、小结
综上所述,Hype的动作功能,可通过设置具体的动作,如鼠标单击、鼠标悬停等,让各个场景之间具备交互性。实际上,我们平常在浏览网页时,就会经常使用到这种动作功能,比如通过鼠标单击,可前往不同的网页。