KeyframeEffect - 创建一组用于播放动画的关键帧

KeyframeEffect 是 Web 动画 API 的接口，允许我们创建一组用于播放动画的属性和值，称为关键帧（keyframes）。这些帧可以随后使用 Animation() 构造函数进行播放。

构造函数

KeyframeEffect()

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

属性

KeyframeEffect.target

获取并设置由此对象设置动画的元素或伪元素。对于不以特定元素为目标的动画，它可能是 null。

KeyframeEffect.iterationComposite

获取并设置迭代复合操作，以解析此关键帧效果的属性值更改。

KeyframeEffect.composite

获取并设置复合操作属性，以解析此关键帧效果与其他关键帧效果之间的属性值更改。

方法

该接口从其父接口 AnimationEffect 继承其某些方法。

AnimationEffect.getComputedTiming()

返回此关键帧效果的计算当前计时值。

KeyframeEffect.getKeyframes()

返回构成此效果的计算关键帧及其计算的关键帧偏移量。

AnimationEffect.getTiming()

与包含所有动画的计时值的动画关联的 EffectTiming 对象。

KeyframeEffect.setKeyframes()

替换构成此效果的关键帧集。

AnimationEffect.updateTiming()

更新指定的计时属性。

实例

在跟着白兔走的实例中，KeyframeEffect 构造函数用于创建一组关键帧，用于指示了如何设置白兔钻下洞里的动画效果：

 var rabbitDownKeyframes = new KeyframeEffect( 
    whiteRabbit, // 要执行动画的元素
    [
      { transform: 'translateY(0%)' }, // 关键帧 
      { transform: 'translateY(100%)' } // 关键帧
    ], 
    { duration: 3000, fill: 'forwards' } // 关键帧选项
  );

规范

规范	状态	备注
Web Animations KeyframeEffect 的定义	工作草案	初始定义

桌面浏览器兼容性

移动浏览器兼容性

1. Web Animations API 仅在 Firefox Nightly 版本中默认启用。它在 Developer Edition 中启用，直到 58，默认情况下不再启用它。您可以通过将首选项 dom.animations-api.core.enabled 设置为 true 来在 beta 和发布版本中启用它，并且可以通过将此首选项设置为 false 来在任何 Firefox 版本中禁用它。

2. 仅在 Firefox 52 及更高版本的 Nightly 版本中启用。在 Beta/发布版本中关闭。

相关链接

• Web 动画 API
• Animation