文档介绍:H5页面设计使用教程:动画时序设置
动画时序,简单来讲就是动画或动画组执行的先后顺序,一般是两个及其以上,为了方便大家理解,在这里,从简单的2个动画到多个动画及动画组,为大家讲解。
一、用出现方式控制动画时序:
H5页面设计使用教程:动画时序设置
动画时序,简单来讲就是动画或动画组执行的先后顺序,一般是两个及其以上,为了方便大家理解,在这里,从简单的2个动画到多个动画及动画组,为大家讲解。
一、用出现方式控制动画时序:
:
如图,在画面中添加了一张小人图片,并给小人添加了两个动画,默认不修改任何设置。
假设想实现动画1执行完动画2执行,要给动画2设置出现方式,设置如下:
——————:上一个之后开始,橙色对号确认设置。
:
只需要把刚刚动画2设置的出现方式改为:和上一个一起开始,即和上一个动画一起执行播放。
二、用等待触发器触发控制时序
以上两种动画时序也可以通过给动画设置动画触发器的方式,通过选择是否勾选来设置:
翻开动画2的动画属性设置面板,勾选等待触发器触发;
翻开动画1的动画属性设置面板,设置动画触发器——动画结束时——点击+号添加播放动画选择动画2,如图:
:
翻开动画2的动画属性设置面板,勾选等待触发器触发;
翻开动画1的动画属性设置面板,设置动画触发器——动画开始时——动画2播放,如图:
三、用延迟时间控制时序
动画1的持续时间默认是1秒,我们不做改动;
翻开动画2的动画属性设置面板,选择出现方式是:和上一个一起开始;即动画1、动画2一起执行;但是给动画2设置延迟时间为1秒,即动画1播放完后,动画2要等1秒才播放。这样就形成了两个动画一前一后执行的效果。如图:
补充:如果动画1设置了延迟1秒,动画2的出现方式为:和上一个一起,动画2跟动画1一起执行的时候,动画2也要跟着动画1一起延迟1秒。
如果出现方式改为:上一个之后开始,即动画1执行完动画2再执行,但是设置了延迟时间,动画要在播放前晚1秒再播放。
四、多个动画或动画组执行的时序调整
现在我再添加一个动画,想要动画1执行完以后,动画2、动画3才一起执行,有多种方式。
添加完动画3,我们将动画1、2、3的出现方式都设置为默认的上一个之后开始。然后到右侧的动画时序管理面板,看下动画的执行