Animation
Animation はウェブアニメーション APIのインターフェイスで、アニメーションプレイヤーを表し、アニメーションノードやソースに対する再生制御やタイムラインを提供します。
コンストラクター
Animation()-
新しい
Animationオブジェクトのインスタンスを生成します。
プロパティ
Animation.currentTime(en-US)-
このアニメーションの現在時刻の値で、ミリ秒単位です。再生中か停止中かは問いません。アニメーションに
timeline(en-US) がなかったり、無効であったり、まだ再生されていなかったりした場合は、この値はnullになります。 Animation.effect(en-US)-
このアニメーションに関連付けられた
AnimationEffect(en-US) を取得または設定します。これはふつう、KeyframeEffect(en-US) オブジェクトになります。 Animation.finished(en-US) 読取専用-
このアニメーションにおいて現在完了しているプロミスを返します。
Animation.id(en-US)-
このアニメーションを識別するための
Stringを取得または設定します。 Animation.pending(en-US) 読取専用-
このアニメーションが現在、再生待ちや再生中の一時停止などの非同期操作を待機しているかどうかを示します。
Animation.playState(en-US) 読取専用-
列挙型の値で、アニメーションの再生状態を示す列挙値を返します。
Animation.playbackRate(en-US)-
このアニメーションの再生速度を取得または設定します。
Animation.ready(en-US) 読取専用-
このアニメーションの準備ができているかどうかを示すプロミスを返します。
animation.replaceState(en-US)-
アニメーションの置換状態を返します。
activeならばアニメーションが置き換えられたこと、persistedならばAnimation.persist()(en-US) が呼び出されたことを示します。 Animation.startTime(en-US)-
アニメーションの再生が始まる予定の時刻を取得または設定します。
Animation.timeline(en-US)-
このアニメーションに関連付けられる
timeline(en-US) を取得または設定します。
メソッド
Animation.cancel()-
このアニメーションで発生したすべての
keyframeEffects(en-US) を消去し、再生を中止します。 animation.commitStyles()(en-US)-
アニメーションの終了時のスタイル状態を、そのアニメーションが削除された後でも、アニメーションしている要素にコミットします。これは、アニメーション終了時のスタイル状態を
style属性内のプロパティの形で動作している要素に書き込むことで行われます。 Animation.finish()(en-US)-
再生位置をアニメーションのどちらかの端まで移動します。アニメーションが通常再生中か逆再生中かによって変わります。
Animation.pause()(en-US)-
アニメーションの再生を一時停止します。
animation.persist()(en-US)-
ブラウザーのアニメーションの自動削除の動作により、アニメーションが削除された場合、明示的にアニメーションを持続させます。
Animation.play()(en-US)-
アニメーションの再生を開始または再開します。また、前回終了したアニメーションを再度開始します。
Animation.reverse()(en-US)-
再生方向を反転させ、アニメーションの開始位置で停止させます。アニメーションが終了しているか未再生の場合は、末尾から先頭に向けて再生されます。
Animation.updatePlaybackRate()(en-US)-
アニメーションの再生位置を同期させた後の速度を設定します。
イベント
cancel(en-US)-
Animation.cancel()メソッドが呼び出されるか、アニメーションの再生状態が他の状態から"idle"へ遷移した場合に発行されます。 finish(en-US)-
アニメーションの再生が終了した時に発行されます。
remove(en-US)-
アニメーションが取り除かれた時 (すなわち、
active置換状態に遷移した時）に発行されます。
アニメーションの自動削除
同じ要素に多数のアニメーションを起動させることが可能です。それらが不定である場合（つまり前方充填）、巨大なアニメーションリストとなり、メモリリークを発生させる可能性があります。このため、最近のブラウザーは Web Animations 仕様の一部を実装しており、開発者が明示的に指定しない限り、前方充填アニメーションのオーバーライドを自動的に削除しています。
このことは、簡単な不定アニメーションの置き換えデモで実際に見ることができます。関連する JavaScript の機能は以下の通りです。
animation.commitStyles()(en-US) により、アニメーションされる要素にアニメーションの終了時のスタイル状態を、そのアニメーションが削除された後でも適用されるようにコミットします。remove(en-US) イベントはAnimationインターフェイス上で、アニメーションを削除した（すなわち置換状態がactiveになった）ときに発行されます。animation.persist()(en-US) はアニメーションを明示的に保持させたい場合に使用します。animation.replaceState(en-US) はアニメーションの置換状態を返します。アニメーションが削除された場合はactiveとなり、persist()(en-US) が呼び出された場合はpersistedとなります。
アクセシビリティの考慮
注意欠陥多動性障碍（ADHD）などの認知能力に不安のある方にとって、まばたきや点滅するアニメーションは問題となることがあります。さらに、ある種の動作は、前庭障害、てんかん、片頭痛、スコトピック過敏症の引き金になることがあります。
アニメーションを一時停止したり、無効にしたりするメカニズムを提供したり、動作縮減メディアクエリーを使って、アニメーションなしの操作を希望するユーザーのために補完的な操作を提供することを検討してください。
仕様書
| Specification |
|---|
| Web Animations # the-animation-interface |
ブラウザーの互換性
BCD tables only load in the browser