HTML5制作软件做出元素渐变色动画的具体教程

Hype作为Mac现下常用的HTML5制作软件，在动画的设计方面有着强大的功能。

今天小编就带大家了解这款HTML5制作软件如何做出元素渐变色动画。小编自用的版本是Hype4，下面就使用软件页面进行演示。

首先需要大家在网站下载Hype 4的正版软件并打开，在页面中新建出一个元素，小编以圆形元素为例为大家演示。

图1：新建一个圆形元素界面

可以先给圆形元素填充一种颜色，Hype 4提供多种色板可以进行选择，小编选择一种粉色进行填充，把粉色作为元素的起始颜色。

图2：填充初始颜色界面

第二步，调节时间轴，确定终止时间节点，将刻度线拖拽到终止时间节点位置。

图3：时间轴界面

下面就是关键一步，点击“记录”按钮，开始自动记录关键帧功能。

图4：自动记录关键帧界面

当“记录”按钮背景变为红色时，就表示已经开始记录。将圆形元素按照一定路径进行拖动，蓝色虚线即是元素运行的路径。

图5：元素运动路径设置界面

渐变色动画需要元素沿路径运动的过程中从一个颜色转变为另一种颜色，所以这时需要给终止状态下的元素填充另一种颜色。小编在色板中选择了一种紫色作为最终颜色状态。

图6：终止时间节点元素状态界面

设置完成后，记得关闭自动记录关键帧功能，防止后期出现不需要的动画效果。

最后就是观看动画的效果啦，在键盘点击“空格键”可以快速播放动画，就能看到效果啦。

可以看到在不同帧上面元素颜色发生着改变，Hype 4自动记录功能的强大之处也可以在这里体现，当用户设置了初始颜色和最终颜色，自动记录关键帧功能会为元素补上中间状态的颜色，得到的效果就是渐变色效果啦。

图7：动画效果界面

以上就是制作渐变色动画效果的步骤啦，快来和小编一起使用这款Hype 4吧，从制作简单、精巧的小动画开始。

来源：Mac软件小达人