Animation: startTime プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

Animation.startTimeAnimation インターフェイスのプロパティで、倍精度浮動小数点値で、アニメーションの再生開始予定時刻を示します。

アニメーションの開始時刻は、対象とする timeline が再生を始める時刻です。アニメーションの 開始時刻 は、最初は未解決です(値がないので null という意味です)。

現在の時刻をミリ秒で表す浮動小数点数、または時刻が設定されていない場合は null です。この値を読むことで、現在設定されている開始時刻を知ることができ、この値を変更することで異なる時刻にアニメーションを始めることができます。

ウェブアニメーション API の実行の例では、すべての新しいアニメーションする猫に、実行する元の猫と同じ startTime を与えることで同期させることができます。

js
const catRunning = document
  .getElementById("withWAAPI")
  .animate(keyframes, timing);

/* 新しい猫を作成する関数 */
function addCat() {
  const newCat = document.createElement("div");
  newCat.classList.add("cat");
  return newCat;
}

/* これは、 WAAPI 列に猫を追加する関数 */
function animateNewCatWithWAAPI() {
  // make a new cat
  const newCat = addCat();

  // animate said cat with the WAAPI's "animate" function
  const newAnimationPlayer = newCat.animate(keyframes, timing);

  // set the animation's start time to be the same as the original .cat#withWAAPI
  newAnimationPlayer.startTime = catRunning.startTime;

  // Add the cat to the pile.
  WAAPICats.appendChild(newCat);
}

時間精度の低下

タイミング攻撃やフィンガープリンティングから保護するために、 animation.currentTime の精度はブラウザー設定によっては丸められている可能性があります。 Firefox では、 privacy.reduceTimerPrecision 環境設定が既定で有効になっており、 Firefox 59 では 20 マイクロ秒が既定値です。

js
// Firefox 60 における 時間制度の低下 (2ms)
animation.currentTime;
// 23.404
// 24.192
// 25.514
// …

// `privacy.resistFingerprinting` が有効な場合の時間制度の低下
animation.currentTime;
// 49.8
// 50.6
// 51.7
// …

Firefox では、 privacy.resistFingerprinting を有効にすると、精度を 100ms または privacy.resistFingerprinting.reduceTimerPrecision.microseconds の値のどちらか大きい方にすることができます。

仕様書

Specification
Web Animations
# dom-animation-starttime

ブラウザーの互換性

BCD tables only load in the browser

関連情報