Animation：startTime 屬性

Baseline 已廣泛支援

此功能已經成熟，並可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 3 月⁩起，它已在各瀏覽器中推出。

Animation 介面的 Animation.startTime 屬性是一個雙精度浮點值，表示動畫播放應開始的計劃時間。

動畫的開始時間是其 timeline 在其目標 KeyframeEffect 被計劃開始播放時的時間值。動畫的開始時間最初是未解析的（意味著它是 null，因為它沒有值）。

值

一個浮點數，表示以毫秒為單位的當前時間，如果未設定時間，則為 null。您可以讀取此值來確定當前設定的開始時間，也可以更改此值以使動畫在不同時間開始。

示例

同步不同的動畫

在下面的示例中，我們可以透過為所有新動畫貓設定與原始執行貓相同的 startTime 來同步它們。請注意，這僅在 Web Animation API 中才可能實現：使用 CSS 動畫不可能同步兩個獨立的動畫。

<div id="css-cats">
  <h2>Cats animated with<br />CSS Animations</h2>
  <div class="cat with-css"></div>
  <button id="insert-css-cat">Add a Cat</button>
</div>

<div id="waapi-cats">
  <h2>Cats animated with the<br />Web Animation API</h2>
  <div class="cat" id="with-waapi"></div>
  <button id="insert-waapi-cat">Add a Cat</button>
</div>

css

/* All cats have the same dimensions and the same sprite for a background image. */
.cat {
  background: url("/shared-assets/images/examples/web-animations/cat_sprite.png") -600px
    0 no-repeat;
  height: 150px;
  width: 100%;
}

/* The cats animated with CSS have their running animations set with CSS */
.cat.with-css {
  animation: 0.75s steps(13, end) infinite run-cycle;
}

/*
  The keyframes for the CSS running animation.
  This moves the background image sprite around.
*/
@keyframes run-cycle {
  from {
    background-position: -600px 0;
  }
  to {
    background-position: -600px -1950px;
  }
}

#css-cats,
#waapi-cats {
  text-align: center;
  vertical-align: top;
  min-width: 300px;
}

body {
  background: #e5e6e9;
  color: #071933;
  font-family: sans-serif;
  display: flex;
  flex-wrap: wrap;
}

const cssCats = document.getElementById("css-cats");
const waapiCats = document.getElementById("waapi-cats");
const insertCSSCat = document.getElementById("insert-css-cat");
const insertWAAPICat = document.getElementById("insert-waapi-cat");

// The same information as @keyframes run-cycle
const keyframes = [
  { backgroundPosition: "-600px 0" },
  { backgroundPosition: "-600px -1950px" },
];
// The same information as .cat.with-css
const timing = {
  duration: 750,
  iterations: Infinity,
  easing: "steps(13, end)",
};

const catRunning = document
  .getElementById("with-waapi")
  .animate(keyframes, timing);

function createCat() {
  const newCat = document.createElement("div");
  newCat.classList.add("cat");
  return newCat;
}

insertCSSCat.addEventListener("click", () => {
  const newCat = createCat();
  newCat.classList.add("with-css");
  cssCats.insertBefore(newCat, insertCSSCat);
});

insertWAAPICat.addEventListener("click", () => {
  const newCat = createCat();
  const newAnimationPlayer = newCat.animate(keyframes, timing);
  // set start time to be the same as the original .cat#with-waapi
  newAnimationPlayer.startTime = catRunning.startTime;
  waapiCats.insertBefore(newCat, insertWAAPICat);
});

為了防止時序攻擊和指紋識別，animation.startTime 的精度可能會根據瀏覽器設定進行舍入。在 Firefox 中，privacy.reduceTimerPrecision 首選項預設啟用，預設為 2ms。您也可以啟用 privacy.resistFingerprinting，在這種情況下，精度將為 100ms 或 privacy.resistFingerprinting.reduceTimerPrecision.microseconds 的值（以較大者為準）。

例如，在降低時間精度的情況下，animation.startTime 的結果將始終是 0.002 的倍數，或者在啟用 privacy.resistFingerprinting 的情況下是 0.1（或 privacy.resistFingerprinting.reduceTimerPrecision.microseconds）的倍數。

// reduced time precision (2ms) in Firefox 60
animation.startTime;
// Might be:
// 23.404
// 24.192
// 25.514
// …

// reduced time precision with `privacy.resistFingerprinting` enabled
animation.startTime;
// Might be:
// 49.8
// 50.6
// 51.7
// …