Hype

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

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

发布时间:2020/09/18

一个好的静态场景决定了一个网页所能达到的下限,而一个好的动态效果则决定了一个网页所能达到的上限。在上一章节中,小编带大家制作好了电子贺卡的静态场景页面,而在本节中,将正式开始进入动态效果的制作,这是取决网页是否成功的核心所在。

下面,小编将在Mac系统上,使用Hype 4版本,开始下面教程的演示讲解。

  1. 一、心形上浮效果制作

从第一节的最终效果预览GIF可以看到,页面上有几个心形图形上浮的动态效果,并且是一直循环重复的。想要达到这个循环的效果,就需要使用到Hype的时间线循环功能,当然,后续的动态心形图形沿着Love曲线移动也是一样的原理,因此需要创建2条新的时间线,一条命名为“心形上浮”,另一条命名为“心形移动”。

第一步:创建时间线的操作很简单,点击主时间线旁如下图1红框的小按钮,然后选择“新时间线”,创建时间线,并按照上述进行命名即可。

创建2条时间线
图1:创建2条时间线

第二步:点击“元素”,然后选择图像,将心形图像导入到场景中,如下图2,然后使用快捷键“Command + C”快速复制出2个相同的心形图像。

导入心形图像
图2:导入心形图像

第三步:使用鼠标调整心形图形的大小,最好设置为两大一小,这里小编设置的小心形宽度大小为42px,高度为39px;大心形宽度大小为61px,高度为57px,供大家参考。调整结束以后,拖动三个心形图案到场景的最下方,并分别拉到左边、中间和相对靠右的位置,具体位置如下图3红框所示。

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

第四步:移动时间线到00:07:00的位置,点击“录制”按钮,开始录制动画,然后直接移动最左边的心形图像到终点的位置,此时的移动路径会呈现一条直线,鼠标拖动直线的某个点,可以将直线按照该点进行变形,通过拖拽下图4红色箭头所指的两个拖拽点,可以调整变形的幅度,将直线变为S型曲线,调整后,最终的移动路径如下图4所示。

移动左边图形
图4:移动左边图形

第五步:取消“录制”按钮,然后移动时间到00:02:13秒,再点击“录制”按钮,移动时间线到00:09:22秒处,根据上述的方法,调整中间心形图形的移动路径如下图5,注意中间的心形是从右边飞出场景的。

中间心形的移动路径
图5:中间心形的移动路径

第六步:取消“录制”按钮,移动时间到00:04:00秒,再点击“录制”按钮,移动时间线到00:08:06秒处,根据上述的方法,调整右边心形图形的移动路径如下图6,右边的心形从场景中间飞出场景。

右边心形的移动路径
图6:右边心形的移动路径

当然,上述的移动路径也不一定需要根据小编的设置而来,大家也可以随性发挥,包括心形图形的个数和开始动画、结束动画的时间,都可以根据自身需要进行调整。

第七步:选中全部三个心形图像的时间线,然后点击下图7红框的按钮,将原本默认的“渐入/渐出”效果改为“渐出”,使得动画效果更生动更符合当前场景。

调整动画效果
图7:调整动画效果
  1. 二、祝福语闪烁效果制作

在效果预览中,“happy national day”这句祝福语是会一闪一闪的,那么这个效果又该如何实现呢?原理其实就是利用文字透明度的重复变化,实现闪烁的效果。

第一步:切换到“主时间线”,选中文本,点击“录制”动画按钮,在00:00:00秒处,切换到“元素检查器”,设置文本的不透明度为75%,然后间隔8毫秒,即时间线移动到00:00:08秒处,调整文本的不透明度为100%,再间隔8毫米,时间线移动到00:00:16秒,调整文本的不透明度为75%,这样就实现了一个闪一下亮一下再暗一下的闪烁效果了。

文本动画时间线
图8:文本动画时间线

第二步:同样的,移动时间线到00:00:24,重复上述步骤,再录制一个相同的动画,此时的时间线动画展示如下图9,这样是为了实现在1.1秒内文字闪现2次,然后接下来1秒停止闪烁的效果。

文本动画时间线
图9:文本动画时间线

第三步:移动时间线到00:02:15秒处,然后点击下方图10红框的小加号,添加一个关键帧,时间线操作选择“开始时间线”,时间线选择“主时间线”,这样就完成了文字重复闪烁的动画效果了。

添加关键帧
图10:添加关键帧

到这里为止,本节就结束了,在本节中,小编带大家学习了如何制作心形图形上浮的动画和文字闪烁的动画,在下一节中,将主要带大家学习实现心形动态沿着Love轨迹移动的效果,请大家继续关注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