Animation
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年3月以降、すべてのブラウザーで利用可能です。
Animation はウェブアニメーション APIのインターフェイスで、アニメーションプレイヤーを表し、アニメーションノードやソースに対する再生制御やタイムラインを提供します。
コンストラクター
Animation()-
新しい
Animationオブジェクトのインスタンスを生成します。
インスタンスプロパティ
Animation.currentTime-
このアニメーションの現在時刻の値で、ミリ秒単位です。再生中か停止中かは問いません。アニメーションに
timelineがなかったり、無効であったり、まだ再生されていなかったりした場合は、この値はnullになります。 Animation.effect-
このアニメーションに関連付けられた
AnimationEffectを取得または設定します。これはふつう、KeyframeEffectオブジェクトになります。 Animation.finished読取専用-
このアニメーションにおいて現在完了しているプロミスを返します。
Animation.id-
このアニメーションを識別するための
Stringを取得または設定します。 Animation.overallProgress読取専用-
0以上1以下の数値で、このアニメーションの最終状態に向かう全体の中の進捗を示します。 Animation.pending読取専用-
このアニメーションが現在、再生待ちや再生中の一時停止などの非同期操作を待機しているかどうかを示します。
Animation.playState読取専用-
列挙型の値で、アニメーションの再生状態を示す列挙値を返します。
Animation.playbackRate-
このアニメーションの再生速度を取得または設定します。
Animation.ready読取専用-
このアニメーションの準備ができているかどうかを示すプロミスを返します。
Animation.replaceState読取専用-
アニメーションがアクティブか、他のアニメーションに置き換えられて自動的に除去されたか、
Animation.persist()の呼び出しによって明示的に維持されているかを示します。 Animation.startTime-
アニメーションの再生が始まる予定の時刻を取得または設定します。
Animation.timeline-
このアニメーションに関連付けられる
timelineを取得または設定します。
インスタンスメソッド
Animation.cancel()-
このアニメーションで発生したすべての
keyframeEffectsを消去し、再生を中止します。 Animation.commitStyles()-
アニメーションの現在のスタイル状態を、そのアニメーションが削除された後でも、アニメーションしている要素にコミットします。これは、アニメーションの現在のスタイル状態を
style属性内のプロパティの形で動作している要素に書き込むことで行われます。 Animation.finish()-
再生位置をアニメーションのどちらかの端まで移動します。アニメーションが通常再生中か逆再生中かによって変わります。
Animation.pause()-
アニメーションの再生を一時停止します。
Animation.persist()-
アニメーションを明示的に維持し、別のアニメーションに置き換わったときにアニメーションの自動削除が行われることを防ぎます。
Animation.play()-
アニメーションの再生を開始または再開します。また、前回終了したアニメーションを再度開始します。
Animation.reverse()-
再生方向を反転させ、アニメーションの開始位置で停止させます。アニメーションが終了しているか未再生の場合は、末尾から先頭に向けて再生されます。
Animation.updatePlaybackRate()-
アニメーションの再生位置を同期させた後の速度を設定します。
イベント
cancel-
Animation.cancel()メソッドが呼び出されるか、アニメーションの再生状態が他の状態から"idle"へ遷移した場合に発行されます。 finish-
アニメーションの再生が終了した時に発行されます。
remove-
アニメーションがブラウザーによって自動的に除去された際に発生します。
仕様書
| 仕様書 |
|---|
| Web Animations # the-animation-interface |