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.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
の値のどちらか大きい方にすることができます。
仕様書
Specification |
---|
Web Animations # dom-animation-starttime |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- ウェブアニメーション API
Animation
Animation.currentTime
: アニメーションの現在の時刻