关键帧格式

Element.animate()、KeyframeEffect() 和 KeyframeEffect.setKeyframes() 都接受格式化为表示一组关键帧的对象。此格式有几种选项，将在下面说明。

语法

有两种不同的方式来格式化关键帧

  1. 由属性和值组成的对象的数组（关键帧），用于迭代。这是由 getKeyframes() 方法返回的规范格式。
    js
    element.animate(
  [
    {
      // from
      opacity: 0,
      color: "#fff",
    },
    {
      // to
      opacity: 1,
      color: "#000",
    },
  ],
  2000,
);
    可以通过提供offset值来指定每个关键帧的偏移量。
    js
    element.animate(
  [{ opacity: 1 }, { opacity: 0.1, offset: 0.7 }, { opacity: 0 }],
  2000,
);

    注意： 如果提供offset值，则必须介于 0.0 和 1.0（包括）之间，并按升序排列。

    不必为每个关键帧指定偏移量。没有指定偏移量的关键帧将在相邻关键帧之间均匀分布。可以通过提供easing值来指定应用于关键帧之间的缓动，如下所示。
    js
    element.animate(
  [
    { opacity: 1, easing: "ease-out" },
    { opacity: 0.1, easing: "ease-in" },
    { opacity: 0 },
  ],
  2000,
);
    在此示例中，指定的缓动仅从它指定的关键帧应用到序列中的下一个关键帧。但是，在options参数上指定的任何easing值都会在动画的单个迭代中应用 - 在整个持续时间内。
  2. 包含由要动画化的属性和要迭代的值的数组组成的键值对的对象。
    js
    element.animate(
  {
    opacity: [0, 1], // [ from, to ]
    color: ["#fff", "#000"], // [ from, to ]
  },
  2000,
);
    使用此格式，每个数组中的元素数量不必相等。提供的将独立地间隔开。
    js
    element.animate(
  {
    opacity: [0, 1], // offset: 0, 1
    backgroundColor: ["red", "yellow", "green"], // offset: 0, 0.5, 1
  },
  2000,
);
    特殊键offset、easing和composite（在下面描述）可以与属性值一起指定。
    js
    element.animate(
  {
    opacity: [0, 0.9, 1],
    offset: [0, 0.8], // Shorthand for [ 0, 0.8, 1 ]
    easing: ["ease-in", "ease-out"],
  },
  2000,
);
    在从属性值列表生成合适的关键帧集后，每个提供的偏移量将应用于相应的关键帧。如果值不足，或者列表包含null值，则没有指定偏移量的关键帧将像上面描述的数组格式一样均匀地分布。如果easing或composite值太少，则相应的列表将根据需要重复。

隐式进出关键帧

在较新的浏览器版本中，你能够仅设置动画的开始或结束状态（即单个关键帧），如果浏览器能够做到，它将推断动画的另一端。例如，考虑 这个简单的动画 - Keyframe 对象看起来像这样

js
let rotate360 = [{ transform: "rotate(360deg)" }];

我们只指定了动画的结束状态，而开始状态是隐含的。

属性

关键帧指定要动画化的 CSS 属性 的属性值对。属性名称使用 驼峰式命名法 指定，例如 background-color 成为 backgroundColor，而 background-position-x 成为 backgroundPositionX。也允许使用诸如 margin 之类的简写值。

两个例外 CSS 属性是

  • float，它必须写成 cssFloat，因为 "float" 是 JavaScript 中的保留字。这里只是为了参考，这不会对动画产生任何影响，因为 "float" 不是可动画的 CSS 属性。
  • offset，它必须写成 cssOffset，因为 "offset" 表示下面描述的关键帧偏移量。

还可以指定以下特殊属性

offset

关键帧的偏移量，指定为介于0.0和1.0（包括）之间的数字或null。这相当于在 CSS 样式表中使用@keyframes以百分比形式指定开始和结束状态。如果此值为null或缺失，则关键帧将在相邻关键帧之间均匀分布。

easing

从该关键帧到序列中的下一个关键帧使用的 缓动函数。

composite

用于将该关键帧中指定的值与基础值组合的 KeyframeEffect.composite 操作。如果效果上指定的复合操作正在使用，则这将是auto。

另请参阅