Animation

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

ウェブアニメーション API における Animation インターフェースは単一のアニメーションプレーヤーを表し、アニメーションノードやソースに対する再生制御やタイムラインを提供します。

コンストラクタ

Animation()
新たに Animation オブジェクトのインスタンスを生成します。

プロパティ

Animation.currentTime (en-US)
再生中か停止中かに関わらずアニメーションの現在時間をミリ秒で表します。もしアニメーションに timeline (en-US) が無い、またはアニメーションが有効では無かったりまだ再生させていない場合、この値は null となります。
Animation.effect (en-US)
対象のアニメーションに紐付いた AnimationEffectReadOnly (en-US) の取得および設定を行います。このプロパティ値は通常 KeyframeEffect (en-US) オブジェクトになります。
Animation.finished (en-US) 読取専用
対象アニメーションの終了時に Promise を返します。
Animation.id (en-US)
アニメーションを識別するための String の取得および設定を行います。
Animation.pending (en-US) 読取専用
アニメーションが再生の初期化や再生停止といった非同期処理のため現在待ち状態にあるかどうかを示します。
Animation.playState (en-US) 読取専用
アニメーションの再生状況を示す列挙型の値を返します。
Animation.playbackRate (en-US)
アニメーションの再生速度の取得および設定をします。
Animation.ready (en-US) 読取専用
対象アニメーションの再生準備ができた時点で Promise を返します。
Animation.startTime (en-US)
アニメーションが再生される所定時間の取得および設定を行います。
Animation.timeline (en-US)
対象のアニメーションに紐づいた timeline (en-US) の取得および設定を行います。

イベントハンドラ

Animation.oncancel (en-US)
cancel イベントのイベントハンドラーの取得および設定を行います。
Animation.onfinish (en-US)
finish イベントのイベントハンドラーの取得および設定を行います。

メソッド

Animation.cancel()
対象アニメーションによる全ての keyframeEffects (en-US) を消去し、再生を中断します。
Animation.finish() (en-US)
アニメーションが通常再生中の場合は終了を、逆再生中の場合は開始時点を設定します。
Animation.pause() (en-US)
再生中のアニメーションを一時停止します。
Animation.play() (en-US)
アニメーションを再生もしくは再開します。既に終了しているアニメーションについては再度再生を行います。
Animation.reverse() (en-US)
アニメーションを逆再生し、開始時点で終了します。アニメーションが終了しているまたは未再生の場合は終わりから最初まで再生します。
Animation.updatePlaybackRate() (en-US)
対象アニメーション再生位置を同期後、アニメーションの再生速度を設定します。

仕様

仕様 状態 コメント
Web Animations
Animation の定義
草案 初期定義

ブラウザ実装状況

BCD tables only load in the browser