关键帧效果：getKeyframes() 方法

基线广泛可用

此功能已经稳定，并且可以在许多设备和浏览器版本上运行。它自以下时间起在浏览器中可用： 2020 年 3 月.

getKeyframes() 方法是 KeyframeEffect 的一个方法，它返回一个数组，其中包含构成此动画的计算关键帧及其计算偏移量。

语法

getKeyframes()

参数

无。

返回值

返回一个具有以下格式的对象序列

属性值对: 每个关键帧中包含的任意数量的属性值对。
offset: 关键帧的偏移量，指定为介于 0.0 和 1.0（含）之间的数字或 null。这等效于在 CSS 样式表中使用 @keyframes 以百分比形式指定开始和结束状态。如果关键帧是自动间距的，则此值为 null。
computedOffset: 此关键帧的计算偏移量，在生成计算关键帧列表时计算。与上面的 offset 不同，computedOffset 从不为 null。
easing: 从该关键帧到系列中下一个关键帧使用的缓动函数。
composite: 用于将此关键帧中指定的值与基础值组合的 KeyframeEffect.composite 操作。如果正在使用效果上指定的复合操作，则此值将不存在。

示例

在以下示例中，我们可以检查滚动动画以使用 getKeyframes() 方法查看其关键帧

const emoji = document.querySelector("div"); // element to animate

const rollingKeyframes = new KeyframeEffect(
  emoji,
  [
    { transform: "translateX(0) rotate(0)" }, // keyframe
    { transform: "translateX(200px) rotate(1.3turn)" }, // keyframe
  ],
  {
    // keyframe options
    duration: 2000,
    direction: "alternate",
    easing: "ease-in-out",
    iterations: "Infinity",
  },
);

const rollingAnimation = new Animation(rollingKeyframes, document.timeline);
rollingAnimation.play();

// Array [ {…}, {…} ]
console.log(rollingAnimation.effect.getKeyframes());

html

<div>🤣</div>

body {
  box-shadow: 0 5px 5px pink;
}

div {
  width: fit-content;
  margin-left: calc(50% - 132px);
  font-size: 64px;
  user-select: none;
  margin-top: 1rem;
}

规范

规范
Web 动画 # dom-keyframeeffect-getkeyframes

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

Web 动画 API
KeyframeEffect 对象的方法。