动效

一、动效的作用

可以让H5内容有动态效果，丰富内容展示。可以让内容在不同时间出现在页面中，内容加载有层次感。

二、添加动效

选中某个组件，在右侧面板动效设置中，点击【+添加动效】，然后可以选择【入场类】、【强调类】、【退出类】等动效。

1、入场类动效分别有：

从上下左右【淡入】、从上下左右【飞入】、从上下左右【弹入】、从上下左右【旋入】、向上下左右【展开】、淡入、飞入、正向旋转、逆向旋转、从小到大、从大到小、弹性放大、弹性缩小、左右翻转、上下翻转、转入等31种动效。

2、强调类动效分别有：

【旋转2D】、【抖动】、【左右浮动】、【上下浮动】、【闪烁】、【左右摇摆】、【Q弹晃动】、【脉冲】、【橡皮筋】、【钟摆】、【果冻】、【放大旋转】、【旋转】等13种动效。

3、退出类动效分别有：

【淡出】、向上下左右【淡出】、【心跳】、【向左转出】、【向右转出】、【悬挂脱落】、【加速退出】、上下左右【翻转】、向上下左右【弹跳】、【左上旋出】、【右上旋出】、【左下旋出】、【右下旋出】、【缩小】等21种动效。

二、动效功能设置

（1）持续时间、延迟时间、循环次数、循环间隔

添加了动效之后可以根据需要设置动效的持续时间、延迟时间、循环次数、循环间隔等。其中延迟时间较为常用，延迟时间越大，动效播放顺序越往后，反之延迟时间越小，动效播放顺序越往前。

（2）动效触发时机

页面打开时：与旧有逻辑保持一致，当打开/跳转到元素所在页面时，开始播放动效

距离可视区域底部px：即组件顶部与可视区域底部的距离；在长页面中滑动屏幕，当组件滑动到指定时位置时，才触发播放动效。