基础教程：Hype 4工作流程（三）

在上两个章节，已经详细讲解了Hype 4交互动效制作软件的工作流程的案例中，对象从左到右运动的设计。具体内容也点击：基础教程：Hype 4工作流程（二）进行阅读。本章节将继续讲解对象在静止1秒后从右到左的运动设计。

由于本章节讲述的是返回到起点的运动设计，方法及步骤与从左到右的运动基本相似，所以具体步骤不会有很多文字上的解析，小伙伴可以通过GIF图参考具体的设计过程。

一、添加关键帧

从左到右的运动花费了1秒，然后对象等待了1秒，所以对象在第2秒开始从右向左的运动。

点击选择对象，把时间指示器运动到2秒位置，在“属性”面板中的原点（运动路径）对应的右边有一个“+”符号，点击“+”添加关键帧

图1：添加关键帧

二、设置返回时间线

把时间指示器移动到第3秒的位置后，点击“录制”按钮，拖动对象返回起点位置。

图2：设置返回时间线

三、调整运动对象属性

时间指示器在3秒位置，把对象宽度调整为100%，Z角度调整为0度。

图3：调整3秒位置的对象属性

把时间指示器调整到2秒位置，把对象宽度调整为150%，Z角度调整为360度。

图4：调整2秒位置的对象属性

四、调整运动路径

鼠标移动到运动路径上，点击出锚点，把锚点拖拽到指定位置，形成一条新的运动路径。

图5：调整运动路径

五、场景中预览运动效果

取消录制，并点击复位按钮，使时间指示器返回到0点位置。点击“播放”按钮预览运动效果。

图6：场景中预览运动效果

六、调整运动曲线

在“主时间线”面板中，时间指示器移动到2秒位置，点击选择“成组”右侧的2秒至3秒的时间线，然后点击“渐入渐出”文字，在弹出框选择“渐出”。

图7：调整运动曲线

七、浏览器预览运动效果

在“预览”工具中选择Chrome浏览器预览运动效果。

图8：浏览器预览运动效果

八、导出为HTML5文件

在Hype 4菜单栏上选择“文件”-“导出为HTML5”-“文件夹”，在弹出框选择文件存放的位置，点击“存储”后，就生成了HTML文件。

图9：导出为HTML5文件

九、总结

小编通过三篇文稿详细讲述了如何使用Hype 4HTML5创作工具进行一个简单动效的设计过程，相信小伙伴能够通过这三篇文稿初步了解如何使用Hype 4交互动效制作软件了。至于一些原理方面的知识，小编在后面的文稿中将详细讲述。