Hype

Hype中文官网 > 使用技巧 > 实例:使用Hype制作一张动态电子贺卡(三)

实例:使用Hype制作一张动态电子贺卡(三)

发布时间:2020/09/22

本节是使用Hype制作电子贺卡教程的最后一节,在本节中,小编将带来制作心形图形沿着Love轨迹曲线进行移动的动态动画教程,这是电子贺卡的点睛之笔。下面,小编将在Mac系统上,使用Hype 4版本,开始教程的演示讲解。

前一章节,可以点击《实例:使用Hype制作一张动态电子贺卡(二)》进行回顾。

第一步:切换到“心形移动”时间线,然后使用快捷键“Command + C”再复制出1个心形图案,调整这个心形的大小,尽量设置的小一点,刚好覆盖Love轨迹曲线即可,这里小编设置的宽度为21px,高度为20px,供大家参考。然后移动心形图形的位置在下图1红框所示位置,最后在“元素检查器”中,设置不透明度为0。

调整心形图形位置和大小
图1:调整心形图形位置和大小

第二步: 点击“录制”按钮,然后移动时间线到00:07:00秒处,移动其中一个心形图形到Love轨迹终点处,然后使用鼠标慢慢将直线的心形图形移动路径沿着Love轨迹进行修改,最终的移动路径如下图2上方红框所示,这里需要一点耐心,慢慢修改移动路径即可。

心形图形移动轨迹
图2:心形图形移动轨迹

第三步:保持“录制”按钮开启,然后移动时间线到00:00:06秒处,然后在“元素检查器”中,设置不透明度为33%;然后再移动时间线到00:00:15,修改不透明度为100%;移动时间线到00:06:14秒处,点击图3小红框的加号,打上一个关键帧;最后移动时间线到最后,即00:07:00秒处,设置不透明度为0%,完成以后,可以看到心形图形的动画时间线如下图3所示。

心形图形动画时间线
图3:心形图形动画时间线

第四步: 接下来就非常简单了,鼠标右键点击时间线上的心形图像,然后点击最下方的“复制”按钮,再复制出8个带有动画时间线的心形图像,此时的时间线展示如下。

时间线展示
图4:时间线展示

第五步: 选中心形图形的时间线,然后鼠标拖动它即可调整心形图形动画开始时间和结束时间。每间隔15毫秒开始一个心形图形的动画,即将上述时间线调整为下图5所示,最后的一个心形图形的开始时间为00:04:15,结束时间为00:11:00。

心形图形时间线
图5:心形图形时间线

第六步:移动时间线到00:14:00秒处,然后点击时间线操作旁的小加号,选择时间线操作为“开始时间线”,时间线选择“心形移动”,以此实现每隔14秒循环一次心形图形的动态移动。

添加时间线操作
图6:添加时间线操作

第七步:在“场景检查器”中,点击“场景加载时”右侧的加号,添加两个操作。第一个操作选择“开始时间线”,时间线选择“心形上浮”,第二个操作选择“开始时间线”,时间线选择“心形移动”,如下图7。

设置场景加载时操作
图7:设置场景加载时操作

最后,点击Hype上方的“预览”按钮,一起看看自己做出来棒棒哒的效果吧!小伙伴们是不是发现特别简单就完成了一个酷炫的HTML5网站呢?这就是Hype的魅力与神奇之处,还有更多有用酷炫的Hype教程会继续在中文网站上发布,请大家继续关注学习哦。

作者署名:包纸

标签:心形电子贺卡时间线

读者也访问过这里:
Hype中文版
创建漂亮的HTML5网页内容
立即购买
QQ 群
官方交流群:1046763737 立即加群
400-8765-888 kefu@makeding.com
热门文章
H5制作软件Hype导出功能详解
Hype是一款Mac端网页制作工具,它可以通过时间线录制功能制作各种各样的网页炫酷动画效果,同时也支持使用物理引擎制作动画。当然,它的强大不仅仅体现于动画制作方面,它的导出功能同样也是功能齐全,下面小编就通过使用Hype 4版本,为大家详细介绍下这款H5制作软件的导出功能。
2020-06-05
Hype制作矢量形状动态变形的动画效果
相信大家都看过一些网页动画,就是从一个矢量图形慢慢变成另外一个矢量图形。其实这个效果利用Hype可以非常简单地实现,下面小编就利用Hype 4版本,教大家如何快速简单地实现这一功能。
2020-06-09
UI动效设计工具Hype的响应式布局及设置
响应式布局可以使用户的网页在各种尺寸的屏幕上都能够较好地兼容,不会因为屏幕尺寸大小变化导致网页拉伸变形。Hype就支持这种响应式布局,它允许设计者为单个场景创建多个布局,当用户在浏览器中显示页面时,Hype将根据设备的当前宽度动态加载合适的布局。
2020-05-21
Hype中触发事件的使用
一个优秀的网页绝不仅仅是一个静态的页面,在网页当中,还应该存在着一些点击或者触摸等主动触发事件,当用户点击页面上某处的时候,页面会相应的发生一些动态变化,这就是网页的触发事件。Hype作为一款专业的Mac端网页制作软件,同样支持触发事件功能。
2020-06-08
Hype软件持久符号的应用
Hype是一款支持无代码创作炫酷网页的Mac端应用软件,它支持各种动画、元素。其中有一个强大的符号功能,该功能分为基本符号和持久符号两种,本文中,小编将使用Hype 4版本,为大家演示和讲解Hype中的持久符号。
2020-06-04
使用Hype进行动画制作的入门介绍
在一个网页中,如果多了一些动态元素的呈现,会使页面看起来更显得高大上一些。而Hype使用功能强大的动画系统,利用时间线录制功能,使制作者制作动画变得轻而易举。
2020-05-21