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 上檢視此頁面 • 報告此內容的錯誤