Animation

Experimental

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

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

コンストラクタ

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

プロパティ

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

イベントハンドラ

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

メソッド

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

仕様

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

ブラウザ実装状況

BCD tables only load in the browser