发布时间:2021-03-11 14: 19: 24
在上一章节,详细讲述了Hype交互动效制作软件时间线面板中通过在属性界面创建关键帧以及设置关键帧属性的方法来制作动画。
本章节继续讲述Hype 4 HTML5创作工具在时间线面板上如何使用录制的方法来制作动画以及关键帧和录制方法的结合来制作动画。
一、使用录制方法制作动画
在Hype软件的播放控制器中,有一个红色圆点,类似于摄像机中的录像按钮。使用这个录像按钮,结合时间指示器以及设置起始点和终点的对象属性,把起点和终点的属性变化过程录制下来,从而制作成动画效果,这个就是制作动画的录制方法。
1、创建对象
在场景页面上创建一个矩形对象。
2、设置起点的对象属性
选择矩形对象,设置时间轴上时间指示器的位置为0。然后在元素面板设置矩形对象的背景颜色为橙色。
3、设置终点的对象属性
点击“录制”按钮,然后把时间指示器拖动到2s位置。然后把矩形对象的背景颜色改为深紫色。接着鼠标左键点击矩形并按着不放,水平牵引到右边并松开左键。再次点击“录制”按钮,动画制作完成。
4、动画效果
点击“播放”按钮,动画效果与使用关键帧制作的动画效果一样。
二、录制法和关键帧结合制作动画
显然,使用录制法制作的动画与使用关键帧制作动画的效果是一样的,录制法却比关键帧法简单多了,避免了逐个属性创建关键帧。但是,要制作一个不连续的动画时,只使用录制法是无法制作出来的。
在上述案例的动画效果基础上,矩形移动到2s位置后,停止了1s后,又沿原来的路径返回的起点,并且所有属性恢复到初始状态。
使用录制法是无法实现这个动画效果的,这是就需要结合关键帧的方法来制作动画。想要查看详细案例,可点击查看:《车轮相机动画交互效果》。
1、添加关键帧
把时间指示器移动到3s的位置,在“属性”界面点击“原点(左)”右边的“+”按钮以及“背景颜色”的“+”按钮,在3s位置添加关键帧。
2、录制法制作返回原点动画
点击“录制”按钮,把矩形牵引到左边起点位置,并把矩形的背景颜色改为橙色。再次点击“录制”按钮,停止录制,动画制作完成。
3、完整动画效果
三、小结
在使用Hype的时候,大多数情况都是使用录制法来制作动画的,因为它非常的简单并且容易上手,无需逐个属性添加关键帧。但也要注意,在一条时间线上如果有动画暂停,则需要通过设置重启动画的关键帧才能制作完整的动画。
作者:东佛
展开阅读全文
︾
读者也喜欢这些内容:
怎么在Hype中设置掉落弹起的动画效果
如果使用Hype制作球体掉落弹起的效果,是不是只能通过绘制运动路径的方法?其实,我们有更加便捷的方法,就是在关键帧过渡方式中选择弹起的方式,让元素在开始帧与结束帧之间呈现弹跳的动画。...
阅读全文 >
绝对干货!H5动画软件制作大揭秘!
最近收到了公司的一个业务新需求:做一个H5网页动画,提升客户的产品使用体验。这是我们小组第一次制作H5动画,没有经验,像无头苍蝇,反复碰壁,最终团队内部终于敲定了一款软件,进行设计制作。...
阅读全文 >
Hype 4时间线操作 — 切换场景
Hype 4制作的动画在不同场景中的切换,就像不同的视频片段通过转场实现过渡。同样,Hype 4可以通过时间线操作添加触发关键帧,设置切换场景的效果并跳转到指定的场景中,从而实现场景的切换。...
阅读全文 >
Hype 4时间线操作 — 设置触发关键帧
一般情况下,设计的动画会有多个场景,而每个场景也会有多个对象和时间线。但动画的启动只能在一个场景的主时间线上进行,其他的场景、对象和时间线需要在主时间线上的某个时间点触发才能启动。...
阅读全文 >