Hype

Hype中文官网 > 常见问题 > 使用Hype完善元旦贺卡的制作

使用Hype完善元旦贺卡的制作

发布时间:2020/12/30

在前两节《Hype完成元旦贺卡初始场景创建和左侧场景制作》、《用Hype完成元旦贺卡左右侧场景和动画制作》的学习中,我们基本上完成了大部分元旦贺卡的制作,但仍存在着些许问题需要优化。

制作H5的过程就是这样,从场景搭建到动画录制再到最终的页面效果优化,只有一步步耐心地制作,才能产生优秀的作品,话不多说,下面继续开始我们的教程。

一、解决右侧贺卡消失问题

首先分析问题产生的原因:我们的右侧贺卡动画。是在00:00:15时透明度从0变为100的,因此在贺卡00:00:04秒正式打开时,右侧贺卡透明度为0,因此产生此问题。那我们可不可以将00:00:15这个时间点提前,以解决此问题呢?答案是不可以。

我们要明确一点,00:00:15秒处的右侧贺卡,是用来当我们点击贺卡右侧时,将贺卡合上关闭的,它与00:00:04秒的右侧贺卡只是看起来相同,实际上并不是同个元素,解决此问题,我们需要将右侧贺卡正面图片复制一份,然后移动使它的上边位置和左边位置均为0px。

接下来需要对它设置动画,对00:00:15这个时间点,录制不透明度从100到0的动画,如下图1。

最终效果预览
图1:最终效果预览

这样子,从00:00::04到00:00:15间,我们所看到的右侧贺卡就是这个右侧正面图片复制版;而00:00:15秒后,看到的就是真正的右侧贺卡了,完美解决此问题有木有?

二、解决超出页面问题

第一步:将两个组和上述的复制元素,进行成组操作,并命名为“元旦贺卡”,如下图2。

成组操作
图2:成组操作

第二步:将“元旦贺卡”组,录制从00:00:00到00:00:14,左侧位置从-405px到-158px的动画:再录制从00:00:14到00:00:16,左侧位置从-158px到-139px的动画;最后录制从00:00:16到00:00:29,左侧位置从-139px到42px的动画。具体时间线如下图3。

元旦贺卡组时间线
图3:元旦贺卡组时间线

这样就可以在贺卡边打开的过程中,边移动贺卡的位置,保证贺卡一直位于页面中间。

三、增加点击触发事件

首先设置点击贺卡,贺卡展开的事件。在“元旦贺卡”组中创建新的矩形元素,命名为“点击事件元素A”,并设置该元素背景透明,即填充样式为无,然后右键将其“置于顶层”并在“度量检查器”中设置该元素初始的左边位置为-33px,上边位置为381px,宽度为22px,高度为8px。

接下来给它设置下动画,使它在贺卡打开后仍然会跟随移动。点击“录制”按钮,录制一段00:00:06到00:00:07 的动画。动画结尾该元素的左侧位置为-395px,上边位置为0px,宽度为394px,高度为398px。具体时间线如下图4。

点击事件A元素时间线
图4:点击事件A元素时间线

第二步:同样地再创建一个“点击事件元素B”元素并录制动画,上边位置从0px到381px;宽度从394px到22px;高度从398px到8px,它的动画时间线如下图5。

点击事件B元素时间线
图5:点击事件B元素时间线

第三步:为“点击事件元素A”,在“操作检查器”中添加“鼠标点按时”,“继续时间线”,时间线选择“主时间线”,并勾选上“倒序播放”和“可以重新启动时间线”。

为A添加点击事件
图6: 为A添加点击事件

第四步:为“点击事件元素B”,在“操作检查器”中添加“鼠标点按时”,“继续时间线”,时间线选择“主时间线”,勾选上“可以重新启动时间线”。

为B添加点击事件
图7: 为B添加点击事件

最后,在00:00:15秒处的主时间线上,打上一个关键帧,操作设置为“暂停时间线”,如下图。

暂停主时间线关键帧
图8: 暂停主时间线关键帧

到此,我们关于元旦贺卡的制作就全部完成了,有兴趣想要尝试的小伙伴们可以点击Hype下载。大家可以在整张贺卡元素中加入一些音频或者装饰进行点缀,让贺卡看起来更完美,感兴趣的小伙伴可以到Hype中文网站学习更多其他教程哦,感谢大家观看!

作者署名:包纸

标签:元旦贺卡点击触发事件

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