组件动画

阅读时间约 1 分钟

1. 简介

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

2. 组件动画的参数

一个组件的动画是由下面部分构成的:

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

3. 组件进场次序

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

4. 动画时间轴

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

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

5. 组件动画的设置案例

5.1 按次序入场的动画设置

  1. 选中第一个组件,进入组件的动画设置栏
  2. 将进场次数设置为 1
  3. 点击“添加”或“连续添加”按钮打开动画选择弹窗
  4. 在进入动画中选择一个具体动画。也可以同时添加多个前调动画。
  5. 关闭选择窗口,可以得到第一个组件的设置结果
  6. 如果需要,可以点击“执行”按钮,预览当前组件的动画效果
  7. 类似的方法,设置第二个组件的动画
  8. 点击播放预览总体效果
    注:因没有设置播放器,动作指令不会自动触发,请按键盘右键触发动作指令。

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

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

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

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

  1. 选中第一组件,把动画设置的进场次序改为 0;
  2. 选中第二组件,把动画设置的进场次序改为 0,并且把第一个动画的延迟时间改为 1.0 秒;
  3. 点击播放预览总体效果
  4. 可以看到两个组件随着页面先后带着动画出现