Hype

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

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

发布时间:2020/12/30 10:32:29

在前两节《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
热门文章
基础教程:Hype 4软件界面介绍
Hype是一款基于MacOS系统的交互动效制作软件,延续了苹果软件的简洁风格,与Keynote软件的界面基本一致。
2020-07-23
基础教程:Hype 4工作流程(一)
本章节通过一个简单的案例,完整讲述Hype 4的基础操作,让小伙伴了解怎么样使用Hype 4交互动效制作软件设计一个动效。
2020-11-09
H5制作软件Hype导出功能详解
Hype是一款Mac端网页制作工具,它可以通过时间线录制功能制作各种各样的网页炫酷动画效果,同时也支持使用物理引擎制作动画。当然,它的强大不仅仅体现于动画制作方面,它的导出功能同样也是功能齐全,下面小编就通过使用Hype 4版本,为大家详细介绍下这款H5制作软件的导出功能。
2020-06-05
盘点那些简单易用的H5动画制作软件
现在的生活中很多方面都要用到H5动画,比如公众号的推文、电子婚礼请帖、活动邀请函等等,H5动画在我们的生活中扮演着越来越重要的角色,会做H5动画和也成为了工作技能的加分项,那么简单易用的H5动画制作软件又有哪些呢?下面我们一起来盘点两款较为常用的H5制作软件吧。
2021-01-20
Hype 如何进行安装与激活
本篇将为各位小伙伴们集中介绍一下H5制作软件Hype的安装与激活教程。
2020-12-24
Hype软件持久符号的应用
Hype是一款支持无代码创作炫酷网页的Mac端应用软件,它支持各种动画、元素。其中有一个强大的符号功能,该功能分为基本符号和持久符号两种,本文中,小编将使用Hype 4版本,为大家演示和讲解Hype中的持久符号。
2020-06-04