动效时间轴

有时候，我们希望能控制动效的播放顺序和时间。

默认行为

me  `Sunshine in the MIRROR`;

yohane.animate(p => {
  p.x = 100;
  p.duration = 2000;
});

yohane.instant(p => {
  p.x = 0;
});

yohane.animate(p => {
  p.x = 100;
  p.duration = 2000;
});

yohane.animate(p => {
  p.x = 0;
  p.duration = 2000;
});

在默认情况下，所有动效将会依次播放：

1. 第 0 ~ 2 秒中，移动到 x 为 100 的位置；
2. 在前一个动画结束后，立即移动到 x 为 0 的位置；
3. 第 2 ~ 4 秒中移动到 x 为 100 的位置；
4. 第 4 ~ 6 秒中移动到 x 为 0 的位置。

Note

而文字时间轴是独立的，不会受动效时间轴的影响。

timelabel <string>

timelabel 是只在单个语段中生效的标签，用于标记动效的时间锚点。

yohane.animate(p => {
  p.x = 100;
  p.duration = 2000;
});

timelabel("some-label");

yohane.animate(p => {
  p.x = 100;
  p.duration = 2000;
});

yohane.animate(p => {
  p.y = 100;
  p.duration = 2000;
  p.timelabel = "some-label";
});

在这个情况下，动效的播放顺序如下：

1. 第 0 ~ 2 秒中，移动到 x 为 100 的位置；
2. 第 2 ~ 4 秒中移动到 x 为 100，y 为 100 的位置（两个动画同时播放）。

Note

在进入其他语段后，timelabel 会被清空，因此不需要担心在多个语段中使用同名的 timelabel 会导致动效错乱。但在同一个语段中，作为字符串的 timelabel 的值依然需要注意避免重复。

timelabel <number>

另一种方式是使用数字作为 timelabel 的值，这种方式会将 timelabel 转换为绝对时间戳（毫秒）。

yohane.animate(p => {
  p.x = 100;
  p.duration = 2000;
});

yohane.animate(p => {
  p.x = 100;
  p.duration = 2000;
});

yohane.animate(p => {
  p.y = 100;
  p.duration = 2000;
  p.timelabel = 2000;
});

1. 第 0 ~ 2 秒中，移动到 x 为 100 的位置；
2. 第 2 ~ 4 秒中移动到 x 为 100，y 为 100 的位置（两个动画同时播放）。