1 / 9
文档名称:

最新H5页面设计使用教程:动画时序设置.docx

格式:docx   大小:1,575KB   页数:9页
下载后只包含 1 个 DOCX 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

最新H5页面设计使用教程:动画时序设置.docx

上传人:916581885 2022/2/10 文件大小:1.54 MB

下载得到文件列表

最新H5页面设计使用教程:动画时序设置.docx

相关文档

文档介绍

文档介绍: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的出现方式都设置为默认的上一个之后开始。然后到右侧的动画时序管理面板,看下动画的执行