KeyframeEffect

Baseline 广泛可用 *

此功能已经成熟，并可在许多设备和浏览器版本上使用。自 ⁨2020 年 3 月⁩起，它已在各浏览器中推出。

* 此特性的某些部分可能存在不同级别的支持。

KeyframeEffect 接口是 Web Animations API 的一部分，它允许我们创建一组可动画的属性和值，称为关键帧。然后可以使用 Animation() 构造函数来播放这些关键帧。

构造函数

KeyframeEffect(): 返回一个新的 KeyframeEffect 对象实例，并允许您克隆一个现有的关键帧效果对象实例。

实例属性

KeyframeEffect.target: 获取并设置被此对象动画化的元素，或伪元素的起始元素。对于不针对特定元素或伪元素的动画，此属性可能为 null。
KeyframeEffect.pseudoElement: 获取并设置被此对象动画化的伪元素的选择器。对于不针对伪元素的动画，此属性可能为 null。
KeyframeEffect.iterationComposite: 获取并设置用于解析此关键帧效果属性值更改的迭代复合操作。
KeyframeEffect.composite: 获取并设置用于解析此关键帧效果与其他关键帧效果之间属性值更改的复合操作属性。

实例方法

此接口从其父接口 AnimationEffect 继承了一些方法。

AnimationEffect.getComputedTiming(): 返回此关键帧效果的已计算的当前计时值。
KeyframeEffect.getKeyframes(): 返回构成此效果的计算关键帧及其计算的关键帧偏移量。
AnimationEffect.getTiming(): 返回与动画关联的对象，其中包含动画的所有计时值。
KeyframeEffect.setKeyframes(): 替换构成此效果的关键帧集。
AnimationEffect.updateTiming(): 更新指定的计时属性。

示例

在以下示例中，KeyframeEffect 构造函数用于创建一组关键帧，这些关键帧决定了 rofl 表情符号如何在地面上滚动

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);

// play rofl animation
rollingAnimation.play();

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 动画 # the-keyframeeffect-interface

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 2024年7月12日，由 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的错误