组件动画
1. 简介
组件可以伴随着所在的页面切换进入而带着动画一同出现,也可以在页面切入进来后在下一个动作指令执行时再出现。
2. 组件动画的参数
一个组件的动画的构成 | |
---|---|
动画类型 | 动画的动作特征 |
延迟时间 | 当触发指令执行时,等待多久才开始执行动画 |
持续时间 | 这是一个动作完成的时间,动作是固定的,持续时间越短,说明执行越快 |
重复次数 | 会执行多少遍同样的动作 |
缓动函数 | 动画的平滑效果 |
3. 组件进场次序
进场次序
是指该页面所有组件中,本组件的进场顺序。
进场次序为整数类型,默认为 0,说明与所在的页面一同出现。如果进场次序 > 0,则该组件会等下一个动作指令来临时再出现。
不同的组件在同一个页面,可以设定不同的进场次序,组件则可以按照进场次序的从小到大,等待动作指令来临时出现。
当该一个页面所有组件都进场后,下一次操作指令到来,就是切换到下一页了。
4. 动画时间轴
当多个组件的进场次序相同时,也就是在同一个动作指令下进入,但是动画是一个在前一个在后,那么就有了时间顺序。这个时间顺序可以在时间轴
上清晰展现出来。
时间轴可以方便调整动画间的动画时间关系,但这是非必须的。
时间轴可以在编辑器底部拖动出来或者拖动回去。
5. 组件动画的设置案例
5.1 按次序入场的动画设置
选中第一个组件,进入组件的动画设置栏
将进场次序设置为 1
点击“添加”按钮打开动画选择弹窗
在进入动画中选择一个具体动画。也可以同时添加多个前调动画。
关闭选择窗口,可以得到第一个组件的设置结果
如果需要,可以点击“执行”按钮,预览当前组件的动画效果
类似的方法,设置第二/第三个组件的动画
点击播放预览总体效果
注:因没有设置播放器,动作指令不会自动触发,请按键盘右键触发动作指令。进入播放页面 首先看到报告页的组件并没有随页面一起出现,因为设置了入场次序。
按下键盘右键,或者点击事件触发器。然后可以看到设置次序为 1 的组件带着动画展现出来。
5.2 跟随页面入场的动画设置
1) 把上面 5.1 案例的动画配置改动一下:
选中第一组件,把动画设置的进场次序改为 0;
选中第二组,把动画设置的进场次序改为 0,并且把第一个动画的延迟时间改为 1.0 秒;
选中第三个组件,把动画设置的进场次序改为 0,并且把第一个动画的延迟时间改为 2.0 秒;
可以在时间轴上看一下当前页组件的动画设置的时间信息
为何这里选择第二个延时为1.0秒,第三个组件延时2.0秒 ?
这里的设置是让每个组件动画执行完毕后就开始下一个组件的动画,刚好衔接
2) 点击播放预览总体效果
3) 可以看到两个组件随着页面先后带着动画出现