发布时间:2020-07-08 10: 58: 04
在上一小节《实例:使用Hype制作点赞和取消点赞的网页动画(一)》中,小编讲解了如何使用Mac系统HTML5制作软件Hype,制作一个静态的网页场景,该场景可用于制作点赞和取消点赞的网页动画,下面小编就利用Hype 4版本,继续教大家如何利用此场景制作点赞的网页动画效果,请大家跟随小编的步伐一起往下看吧!
首先,除了主时间线以外,还需要再创建3个时间线,如下图1所示。其中一个时间线用于制作点赞后的动画效果,另一个时间线用于制作取消点赞后的动画效果,最后一个时间线用于制作随着点赞和取消点赞事件的发生,点赞数的数字变化效果。
点击图1的“新时间线”按钮,创建时间线,为该时间线填写一个时间线名称,然后点击“创建”,重复三次,创建上述所说的三条时间线,并分别命名为“爱心点击后”、“取消爱心”和“数字变化”。
第一步:时间线创建完成以后,下面开始点赞动画的制作,切换时间线为“爱心点击后”时间线,如下图3所示。
第二步:点击“爱心灰色”图像,然后在Hype检查器的“操作”选项卡中,设置鼠标点按时,添加一个操作,操作选择“开始时间线”,时间线选择“爱心点击后”,然后再添加一个操作,操作选择“开始时间线”,时间线选择“数字变化”,具体如下图4。此项操作,是为了当鼠标点击爱心图像时,执行点赞的动画效果(点赞按钮由灰变红,同时按钮飘动向上),同时修改点赞总数。
第三步:在0秒的时候,点击录制按钮,如下图5,下面开始录制点赞动画。在Hype检查器的“元素”选项卡中,设置“爱心灰色”图像不透明度为100,“爱心-已赞飘动”图像不透明度为0。
第四步:拖动时间线到00:00:07秒,然后点击“爱心灰色”图像,在Hype检查器“元素”选项卡中,设置该图像的不透明度为0,如下图6。这样该图像就设置好了不透明度从100到0的动画,点击点赞按钮后,该灰色爱心图像会慢慢消失不见。
第五步:将时间线移到1秒处,然后点击“爱心-已赞飘动”图像,设置该图像的不透明度为100,然后设置该图像的运动路径,运动路径大家可以设置为自己想要的路径,拖动路径即可修改路径,小编设置的路径如下图7左侧红框所示。完成该动画设置以后,点击灰色爱心进行点赞以后,灰色爱心会逐渐消失,红色爱心会沿着设定好的运动路径缓缓出现。
第六步:设置好灰色爱心消失动画和爱心飘动动画之后,最后还需要设置红色爱心出现的动画,将时间线切换到00:00:19秒处,然后点击“爱心-已赞2”图像,在元素检查器中设置该图像的不透明度为100,即完成了该图像逐渐出现的动画效果,如下图8。
好了,这样就完成了使用Hype制作点赞动画的一个效果了,在下一节中,小编将介绍如何使用Hype制作取消点赞,爱心破碎的动画效果,欢迎小伙伴们继续关注学习!
作者署名:包纸
展开阅读全文
︾
读者也喜欢这些内容:
怎么在Hype中设置掉落弹起的动画效果
如果使用Hype制作球体掉落弹起的效果,是不是只能通过绘制运动路径的方法?其实,我们有更加便捷的方法,就是在关键帧过渡方式中选择弹起的方式,让元素在开始帧与结束帧之间呈现弹跳的动画。...
阅读全文 >
如何在Hype制作3秒后出现下一步的页面(场景设置)
为了让浏览者在阅读页面内容时,花费足够的时间阅读,减少因阅读过快造成信息遗漏,一些页面会设置倒计时按钮。浏览者需要在倒计时完成后,才能看到“下一步”、“下一页”等切换页面的按钮。...
阅读全文 >
利用Hype制作汽车驾驶的动态路线图
在一些电视节目里,为了保护隐私,经常会使用动画来展现当前地点与目的地的行走路径,比如图1所示的简单汽车驾驶路径。...
阅读全文 >
Hype 4一条时间线的轮播图(一) 原理分析及设置显示窗口
在多条时间线上实现的轮播图由于使用了多条时间线,如果通过鼠标事件操作轮播图暂停、图片跳转会变得非常麻烦。实际上,轮播图的运行更普遍的是在一条时间线上,这也是使用JavaScript语言编写轮播图函数或者原型的方法。...
阅读全文 >