javascript - Web 动画 API 中的步骤

Question

我想知道是否有一种方法可以使用 Web 动画 API 逐步制作 Web 动画，而无需手动声明每一帧的开始和结束的偏移量。显然你可以在 CSS 动画中做到这一点。

这是用于动画精灵表。

Answer 1

是的，您可以使用与 CSS 动画相同的方法。也就是说，您可以使用该easing属性指定计时功能。与 CSS 动画不同，您可以将其应用于整个动画或单个关键帧之间。

要将其应用于整个动画，您可以使用：

elem.animate(/* ...keyframes ...*/, { duration: 1000, easing: 'steps(5)' });

或者，要应用于单个关键帧，您可以使用以下方法之一：

// Keyframe array syntax
div.animate(
  [
    { opacity: 0, easing: 'steps(2)' },
    { opacity: 0.5, offset: 0.8, easing: 'steps(3)' },
    { opacity: 1 },
  ],
  {
    duration: 1000,
  }
);

// Object syntax
div.animate(
  {
    opacity: [0, 0.5, 1],
    offset: [0, 0.8, 1],
    easing: ['steps(2)', 'steps(3)'],
  },
  {
    duration: 1000,
  }
);

请注意，CSS 动画只能在关键帧之间进行缓动。它不能在整个动画中进行缓动。

另外，请注意，当应用于关键帧时，从添加到的关键帧开始使用缓动，直到下一个关键帧。因此，没有必要为最后一个关键帧添加缓动。

如果您正在为精灵表设置动画，您可能会发现该jump-none关键字很有用。Firefox 和 Chrome 都支持它。例如，用于steps(5, jump-none)查看所有五个帧。