发布时间:2020-07-17 09: 46: 48
上一章节中,小编利用Hype 4版本,教大家制作交互菜单弹出子菜单的动画效果,在本章节中,小编将继续带来点击交互菜单,母菜单收回子菜单的动画教程,欢迎小伙伴们继续学习。
第一步:点击“元素”按钮,添加两个Button按钮,并分别命名为Button和Button2,如下图1所示。
第二步:鼠标移动Button按钮到主菜单按钮的位置,然后移动Button2按钮在主菜单按钮的正下方,然后在Hype右侧的“元素检查器”中,设置两个按钮的不透明度为0。
第三步:切换时间线为“返回”时间线,然后点击“录制”按钮,移动时间线到00:00:26秒,然后鼠标上移Button2的位置到主菜单按钮的位置,右移Button按钮的位置到主菜单按钮的右侧,具体如下图2所示。
第四步: 点击Button按钮,在Hype右侧的“操作检查器”中,设置“鼠标点按时”,增加一个操作,操作选择“开始时间线”,时间线选择“按下”;然后再添加一个操作,操作选择“开始时间线”,时间线选择“返回”,如下图3。
第五步: 点击Button2按钮,在Hype右侧的“操作检查器”中,设置“鼠标点按时”,增加一个操作,操作选择“开始时间线”,时间线选择“返回”,然后勾选上“倒序播放”,如下图4。
完成以后,所有的动画效果就制作完成了,该动画的原理是:点击主菜单按钮后,实际是点击了Button按钮,触发“按下”时间线的动画效果,弹出子菜单,同时触发“返回”时间线的动画效果,将Button按钮右移,Button2按钮上移到主菜单按钮位置。再次点击主菜单按钮时,实际上点击的是Button2按钮,倒叙触发“返回时间线”的动画效果,将子菜单收回。
小伙伴们跟着小编的教程操作一遍,完成了这一个动画效果,是不是有满满的成就感呢?还有更多有趣好玩的Hype 4教程发布在中文网站上哦,欢迎大家持续关注了解!
作者署名:包纸
展开阅读全文
︾
读者也喜欢这些内容:
怎么在Hype中设置掉落弹起的动画效果
如果使用Hype制作球体掉落弹起的效果,是不是只能通过绘制运动路径的方法?其实,我们有更加便捷的方法,就是在关键帧过渡方式中选择弹起的方式,让元素在开始帧与结束帧之间呈现弹跳的动画。...
阅读全文 >
案例:Hype中如何添加网页标签图标
本章节将通过一个“添加网页标签图标”的案例,详细讲述在“编辑头HTML”中head里的元素语句的编写规则,以及其功能与作用。 案例的讲解涉及到一些代码,不过都相当的简单,相信小伙伴通过这样一个案例能够举一反三,掌握HTML5元素语句的编写,以及文档头部head里的元素的功能和作用。...
阅读全文 >
实例演示Hype主时间线与新建时间线的关系
时间线是Hype进行动画制作的主要功能区,通过在时间线上添加关键帧、操作等,可制作各种类型的动画效果。...
阅读全文 >
利用Hype制作鼠标移至切换图片的效果(鼠标移至动作)
在《利用Hype制作鼠标移至切换图片的效果(场景设置)》中,我们已经详细讲解了切换按钮的制作,以及图片的排版方式。...
阅读全文 >