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 ⁨2020年3月⁩.

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

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

値

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

例

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

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 マイクロ秒が既定値です。

// 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 の値のどちらか大きい方にすることができます。