DocumentTimeline: DocumentTimeline() コンストラクター

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.

DocumentTimeline() はウェブアニメーション API のコンストラクターで、現在の閲覧コンテキストのアクティブな文書に関連付けられた DocumentTimeline オブジェクトの新しいインスタンスを作成します。

構文

js
new DocumentTimeline(options)

引数

options 省略可

新しいタイムラインのオプションを指定します。以下のプロパティが利用できます。

originTime 省略可

数値で、DocumentTimeline のゼロ時刻を、Performance.timeOrigin 関連のミリ秒数で指定します。 既定値は 0 です。

例

原点時刻

originTime が 0 の DocumentTimeline は Performance.timeOrigin から始まる時刻をカウントします。これは Document.timeline と同じ動作です。

js
const timeline = new DocumentTimeline();
console.log(timeline.currentTime === document.timeline.currentTime); // true

0 以外の originTime を設定すると、Document.timeline からDocumentTimeline をその分だけずらします。

js
const offsetTimeline = new DocumentTimeline({ originTime: 500 });
console.log(document.timeline.currentTime - offsetTimeline.currentTime); // 500

現在の瞬間に対して相対的な DocumentTimeline を構築することができます。

js
const nowTimeline = new DocumentTimeline({
  originTime: document.timeline.currentTime,
});
console.log(nowTimeline.currentTime); // 0

仕様書

Specification
Web Animations
# dom-documenttimeline-documenttimeline

ブラウザーの互換性

BCD tables only load in the browser

関連情報