跳到主要内容

组件动画

1. 简介

组件可以伴随着所在的页面切换进入而带着动画一同出现,也可以在页面切入进来后在下一个动作指令执行时再出现。

2. 组件动画的参数

一个组件的动画的构成
动画类型动画的动作特征
延迟时间当触发指令执行时,等待多久才开始执行动画
持续时间这是一个动作完成的时间,动作是固定的,持续时间越短,说明执行越快
重复次数会执行多少遍同样的动作
缓动函数动画的平滑效果

3. 组件进场次序

进场次序是指该页面所有组件中,本组件的进场顺序。
进场次序为整数类型,默认为 0,说明与所在的页面一同出现。如果进场次序 > 0,则该组件会等下一个动作指令来临时再出现。
不同的组件在同一个页面,可以设定不同的进场次序,组件则可以按照进场次序的从小到大,等待动作指令来临时出现。
当该一个页面所有组件都进场后,下一次操作指令到来,就是切换到下一页了。

4. 动画时间轴

当多个组件的进场次序相同时,也就是在同一个动作指令下进入,但是动画是一个在前一个在后,那么就有了时间顺序。这个时间顺序可以在时间轴上清晰展现出来。 时间轴可以方便调整动画间的动画时间关系,但这是非必须的。

时间轴可以在编辑器底部拖动出来或者拖动回去。

5. 组件动画的设置案例

5.1 按次序入场的动画设置

  1. 选中第一个组件,进入组件的动画设置栏

  2. 将进场次序设置为 1

  3. 点击“添加”按钮打开动画选择弹窗

  4. 在进入动画中选择一个具体动画。也可以同时添加多个前调动画。

  5. 关闭选择窗口,可以得到第一个组件的设置结果

  6. 如果需要,可以点击“执行”按钮,预览当前组件的动画效果

  7. 类似的方法,设置第二/第三个组件的动画

  8. 点击播放预览总体效果
    注:因没有设置播放器,动作指令不会自动触发,请按键盘右键触发动作指令。

  9. 进入播放页面 首先看到报告页的组件并没有随页面一起出现,因为设置了入场次序。
    按下键盘右键,或者点击事件触发器。

    然后可以看到设置次序为 1 的组件带着动画展现出来。

5.2 跟随页面入场的动画设置

1) 把上面 5.1 案例的动画配置改动一下:

选中第一组件,把动画设置的进场次序改为 0;

选中第二组,把动画设置的进场次序改为 0,并且把第一个动画的延迟时间改为 1.0 秒;

选中第三个组件,把动画设置的进场次序改为 0,并且把第一个动画的延迟时间改为 2.0 秒;

可以在时间轴上看一下当前页组件的动画设置的时间信息

提示

为何这里选择第二个延时为1.0秒,第三个组件延时2.0秒 ?
这里的设置是让每个组件动画执行完毕后就开始下一个组件的动画,刚好衔接

2) 点击播放预览总体效果

3) 可以看到两个组件随着页面先后带着动画出现