Hype制作矢量形状动态变形的动画效果

相信大家都看过一些网页动画，就是从一个矢量图形慢慢变成另外一个矢量图形。其实这个效果利用Hype可以非常简单地实现，下面小编就利用Hype 4版本，教大家如何快速简单地实现这一功能。

一、插入矢量形状

首先，要制作两个形状之间变形的动画，需要先使用矢量工具创建两个矢量形状。

点击Hype的“元素”按钮，然后选择“矢量形状”，如下图1所示。

图1：为场景添加矢量形状

第二步，在场景中绘制2个矢量形状，第一个形状应该是要变形的形状，第二个形状应该是要用作变形动画最后阶段的形状。将两个形状放在同一场景中后，如下图2所示，这里大家可以根据自己需要绘制矢量图形，小编的图形仅做演示。

图2：绘制2个矢量图形

二、矢量形状动态变形制作

在场景中加入了基本的矢量形状以后，就可以开始进行变形动画的制作。首先，双击选中第一个矢量图形，直至显示矢量图形的瞄点，然后鼠标右键打开菜单后，选择“拷贝”（不是“复制”），或者通过快捷键“⌘+C”复制矢量图形的瞄点数据，如下图3所示。

图3：拷贝瞄点数据

第二步，移动时间线到动画完成的时间点，然后点击“录制”按钮，开始动画录制，如下图4，此时矢量图形会从蓝色变为红色。

图4：开始动画录制

第三步，双击选中第二个矢量形状，然后鼠标右键打开菜单，选择“粘贴”，或者使用键盘快捷键“⌘+V”将第一个矢量形状的瞄点数据粘贴到第二个矢量形状上，此时第二个形状会变为第一个形状的图形，同时时间线上，会多出一个矢量图形，如下图5红框。

图5：粘贴瞄点数据

最后，将时间线拉到第0秒处，然后在时间线操作界面框中，选中第一个矢量形状，切换Hype右侧菜单到“元素”选项卡，设置该矢量图形的可见性为“隐藏”即可，如图6。

图6：设置矢量图形隐藏

完成上述设置以后，可以点击图7红框的预览按钮在浏览器上进行效果预览。

图7：预览效果

好了，这就是小编整理的关于使用Hype制作矢量形状动态变形动画的具体教程，之后还会有更多更有趣、有用的教程发布在城东书院，欢迎大家前往关注！