Hype

Hype中文官网 > 使用技巧 > 如何在Hype制作3秒后出现下一步的页面(动画制作)

如何在Hype制作3秒后出现下一步的页面(动画制作)

发布时间:2021/11/21 10:54:50

在《如何在Hype制作3秒后出现下一步的页面(场景设置)》一文中,我们已经详细讲解了倒计时按钮的制作以及下一步触发动作的设置。

本节中,我们会继续使用Hype完成倒计时按钮的动画制作,其效果如图1所示,可以看到,下一步按钮是在“3s”、“2s”、“1s”按钮倒计时完成后才出现的,单击下一步按钮才能触发跳转下一场景的动画。

图1:3秒后出现下一步的效果

一、制作不同按钮的动画效果

我们先来看一下之前创建的场景,接下来,分别进行“3s”、“2s”、“1s”按钮倒计时的动画制作

图2:场景
图2:场景

1、制作“3s”按钮的动画效果

“3s”按钮是最早出现的,过了1秒后会消失,继而出现“2s”按钮。按照以上逻辑,我们需要依次进行以下操作:

1.开启Hype的自动记录功能

2.在时间线面板选择3s按钮

3.在0秒处添加3s按钮的不透明度关键帧

4.在元素检查器中将3s按钮的不透明度设为100%

图3:0秒处设置不透明度为100%
图3:0秒处设置不透明度为100%

5. 选中3s按钮基础上,将时间线的指针移动到1秒处

6. 在1秒处添加3s按钮的不透明度关键帧

7. 在元素检查器中将3s按钮的不透明度设为0

以上就完成了3s按钮动画的制作。

图4:1秒处设置不透明度为0
图4:1秒处设置不透明度为0

2、制作“2s”按钮的动画效果

接着,进行2s按钮的动画制作,其制作逻辑是,2s秒最开始是隐藏的,随着3s按钮隐藏后出现,但过了1秒后会再次隐藏。

按照以上逻辑,操作如下:

1.开启Hype的自动记录功能

2.在时间线面板选择2s按钮

3.在0秒处添加2s按钮的不透明度关键帧

4.在元素检查器中将2s按钮的不透明度设为0%

图5:0秒处设置不透明度为0
图5:0秒处设置不透明度为0

5. 选中2s按钮基础上,将时间线的指针移动到1秒处

6. 在1秒处添加2s按钮的不透明度关键帧

7. 在元素检查器中将2s按钮的不透明度设为100%

图6:1秒处设置不透明度为100%
图6:1秒处设置不透明度为100%

8. 选中2s按钮基础上,将时间线的指针移动到2秒处

9. 在2秒处添加2s按钮的不透明度关键帧

10. 在元素检查器中将2s按钮的不透明度设为0%

以上就完成了2s按钮动画的制作。

图7:2秒处设置不透明度为100%
图7:2秒处设置不透明度为100%

3、制作“1s”按钮的动画效果

接着,进行1s按钮的动画制作,其制作逻辑是,1s秒在1-2秒是隐藏的,随着2s按钮隐藏后出现,但过了1秒后会再次隐藏。

按照以上逻辑,操作如下:

1.开启Hype的自动记录功能

2.在时间线面板选择1s按钮

3.在0秒处添加1s按钮的不透明度关键帧

4.在元素检查器中将1s按钮的不透明度设为0%

图8:0秒处设置不透明度为0
图8:0秒处设置不透明度为0

5. 选中1s按钮基础上,将时间线的指针移动到2秒处

6. 在2秒处添加1s按钮的不透明度关键帧

7. 在元素检查器中将1s按钮的不透明度设为100%

图9:2秒处设置不透明度为100%
图9:2秒处设置不透明度为100%

8. 选中1s按钮基础上,将时间线的指针移动到3秒处

9. 在3秒处添加1s按钮的不透明度关键帧

10. 在元素检查器中将1s按钮的不透明度设为0%

以上就完成了1s按钮动画的制作。

图10:3秒处设置不透明度为0
图10:3秒处设置不透明度为0

4、制作“下一步”按钮的动画效果

最后,制作下一步按钮的动画效果,其制作逻辑是,下一步按钮从1-3秒间都是隐藏的,过了3秒后才会出现。

按照以上逻辑,操作如下:

1.开启Hype的自动记录功能

2.在时间线面板选择下一步按钮

3.在0秒处添加下一步按钮的不透明度关键帧

4.在元素检查器中将下一步按钮的不透明度设为0%

图11:0秒处设置不透明度为0
图11:0秒处设置不透明度为0

5. 选中下一步按钮基础上,将时间线的指针移动到3秒处

6. 在3秒处添加下一步按钮的不透明度关键帧

7. 在元素检查器中将下一步按钮的不透明度设为100%

图12:3秒处设置不透明度为100%
图12:3秒处设置不透明度为100%

二、设置关键帧过渡效果

完成以上操作后,如图13所示,选中添加的关键帧,单击关键帧面板右侧的过渡方式选项,在其弹出的选项面板中选择“即时”的过渡方式,让按钮的切换显得更加利落。

图13:即时过渡
图13:即时过渡

三、小结

综上所述,通过使用Hype的不透明度关键帧功能,可以设置元素在不同时间点呈现隐藏或可见的状态,该效果适用于场景内同一位置的元素动态变化。

作者:泽洋

标签:Hype动画制作时间线

读者也访问过这里:
Hype中文版
创建漂亮的HTML5网页内容
立即购买
QQ 群
官方交流群:1046763737 立即加群
kefu@makeding.com
热门文章
盘点那些简单易用的H5动画制作软件
现在的生活中很多方面都要用到H5动画,比如公众号的推文、电子婚礼请帖、活动邀请函等等,H5动画在我们的生活中扮演着越来越重要的角色,会做H5动画和也成为了工作技能的加分项,那么简单易用的H5动画制作软件又有哪些呢?下面我们一起来盘点两款较为常用的H5制作软件吧。
2021-01-20
基础教程: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
Hype 如何进行安装与激活
本篇将为各位小伙伴们集中介绍一下H5制作软件Hype的安装与激活教程。
2020-12-24
Hype软件持久符号的应用
Hype是一款支持无代码创作炫酷网页的Mac端应用软件,它支持各种动画、元素。其中有一个强大的符号功能,该功能分为基本符号和持久符号两种,本文中,小编将使用Hype 4版本,为大家演示和讲解Hype中的持久符号。
2020-06-04