实例：Hype制作车轮相机动画交互效果（一）

发布时间：2020/12/03 10:58:48

在Mac系统上，有一款网页制作软件—Hype，它能够帮助UI人员、设计人员、产品经理等非专业编程人员，快速实现制作HTML网页的目的，可以通过加入元素组件的方式，生成网页。

下面小编就来教大家使用Hype 4的“动画录制”功能，制作一个车轮相机动画交互效果的网页，本教程共分为3节，在3节教程中，小编将带大家一步一步完成这个网页交互效果。

一、效果预览展示

首先：看一下图1的GIF预览效果，这个效果就是接下来小编要带大家使用Hype软件实现出来的效果，这个动画效果可运用的地方还是非常多的，特别适用于一些摄影、美图等网站的在线出片功能上。

完成这个效果需要提前准备好2张图片素材，素材如下，大家可以右键点击下图2的两张图片，将它们另存到电脑桌面上，方便后面使用。

二、动画制作

第一步：创建一个场景，然后在“场景检查器”中，设置其宽度为320px，高度为240px。

第二步：点击Hype元素按钮，选择“椭圆形”，导入一个椭圆形元素，如下图4，这个椭圆形元素作为开场从天而降的小颗粒。然后在元素检查器中调整椭圆形元素的宽度和高度为4px，调整元素位置在场景正上方。

第三步：点击“录制按钮”，移动时间线到00:01:15，移动椭圆形的位置到场景的正中间，然后调整椭圆形移动轨迹为下图6的红色箭头（一下一上一下一上再一下），最终轨迹如下图6蓝色线。

第四步：在00:01:15处打上一个关键帧，然后继续移动时间线到00:01:21秒，在“元素检查器”中设置该椭圆形的不透明度为0，制作一个椭圆形逐渐消失的动态效果，最终的椭圆形时间线如下图7。

第五步：在“元素”按钮中再加上一个椭圆形，这里不用鼠标调整椭圆形的大小，直接在“度量检查器”中，设置宽度和高度为12px，左边位置为154px，上边位置为114px，如下图8，再在“元素检查器”中设置上述元素的不透明度为0。

第六步：选中上述元素，移动时间线到00:01:15秒处，在时间线上打上一个关键帧，点击“录制”按钮，开始录制动画，移动时间线到00:01:21处，设置元素的不透明度为100，制造一个元素出现的动态效果；然后再移动时间线到00:02:04处，保持“录制”按钮开启状态，在“度量检查器”中设置椭圆形的“放置”属性如下图9红框。