Web Animations API、
再生/停止などの制御。

再生や停止をコントロールしたい！

こんにちは、「ふ」です。
今回はWeb Animations APIにおける再生や停止などの制御についてお伝えしていきます。

webページが表示されている間、⬆︎のように終始アニメーションしっぱなしで構わないのであれば、

element.aninmate(keyframe,options);

と、animateメソッドを１行書いておけば、済むことです。
ただし「あるきっかけで発火」させたり「一時停止」させたり、これらアニメーションの再生状態を制御するとなると、animationオブジェクトを変数に格納しておく必要があります。

今回の記事ではWeb Animation APIを制御するための準備と、

・再生
・停止
・一時停止
・逆再生
・強制終了

これらを行う方法について説明していきます。

〜と言っても簡単。
Web Animations APIではそれぞれ実行をするためのメソッドがあらかじめ用意されています。

スタンバイ状態。

はじめに、アニメーションを制御するための準備を済ませておきましょう。
animationオブジェクトを変数に格納しておくことで、再生や一時停止などを行うメソッドが使用できるようになります。

<div id = "sikaku"></div>

#sikaku {
    width:100px;
    aspect-ratio:1/1;
    background-color:forestgreen;
}

正方形の要素を１つ用意して、これをアニメーションさせていくとしましょう。

const sikaku = document.getElementById("sikaku")
let options = {
    duration:2000,
}
let keyframes = [
    {transform:translateX(0%)},
    {transform:"translateX(500%)"}
] 

所要時間２秒、右へ500%横移動するキーフレームにしました。
optionsとkeyframesを参照した、アニメーションオブジェクトを変数「ani」に格納しておきます。

let ani = sikaku.animate(keyframes,options);

変数に格納しました。これでアニメーションオブジェクトのメソッドが扱えるようになります。
しかしこの時点でアニメーションは実行状態になってしまうので、cancel( )メソッドで停止状態にしておきましょう。

let ani = sikaku.animate(keyframes,options);
「「３//アニメーションを停止」」
ani.cancel();

アニメーションオブジェクトのcancel( )メソッドは、アニメーションの「実行をキャンセルする」という意味です。変数aniの中にはちゃんとオブジェクトは格納されたままです。

アニメーションを「停止」状態にしたので、見た目はなにも変わりません。
ただしこれでアニメーションをすぐに操作できる、「スタンバイ状態」となっています。

関数定義ではダメなのか?

function animation() {
    let ani = sikaku.animate(keyframes,options);
}

「アニメーションをその場で発動させたくない」ということで、⬆︎のように関数定義に閉じ込めておく、という方法も考えられます。

確かにこれでもOK。ですが、この関数を実行するたびにそのつど、新規でanimationオブジェクトが生成されることになります。そのため複数のアニメーションが重複して実行されるケースも考えられ、条件分岐などの対応が必要となってきます。

なのでちょっとスマートとは言えないのですが、「animationオブジェクトを変数に格納」→「アニメーションをキャンセル」という先に述べたやり方のほうがシンプルな実装で済みます。

次のセクションから、Web Animation APIでの制御について紹介していきましょー。

再生。

ani.play();

はじめに「再生」から。
アニメーションを再生させるには、play( )メソッドを呼び出します。

const playbtn = document.getElementById("playbtn");
playbtn.addEvnetLinsener("click",()=> 「「１ani.play()」」);

アニメーションを発火させるきっかけは目的に応じて自由に設定していただいて構いません。
ここではボタンクリックで呼び出すようにしました。

ボタン⬆︎をクリックするとアニメーションが再生されます。
ただしボタンを連打しても、アニメーションがまた最初の状態から開始されることはありません。play( )メソッドは、「アニメーションが再生されている状態を保持する」働きをしているのです。

アニメーションを停止。

アニメーションを停止させるには、スタンバイの際に使ったcancel( )メソッドを使います。stopボタンを追加し、実装してみます。

const stopbtn = document.getElementById("stopbtn");
stopbtn.addEventListener("click",()=> 「「１ani.stop()」」);

cancel( )メソッドを呼び出すと、アニメーションが進行途中であっても開始前の状態に戻してしまいます。
cancel( )メソッドはアニメーションの「進行を停止」するのではなく、「開始前のスタンバイ状態に戻す」という役割をしています。

一時停止と再開。

こんどは「アニメーション進行中、その場で一時停止」させるメソッドです。
そのまんまですが、pause( )メソッドを使いましょう。

const pausebtn = document.getElementById("pausebtn");
pausebtn.addEventListener("click",()=> 「「１ani.pause()」」);

pauseボタンを準備して、イベントハンドラを指定しました。

playボタンをクリックして再生中にpauseボタンを押すと、その時点の状態で一時停止します。

再開はできないので工夫が必要。

⬆︎のサンプルでは、再生中にpauseボタンを押すとたしかに一時停止します。ただ、その後アニメーションを再開させたい場合、もう一度pauseボタンを押しても、そうはなりません。再開させるにはplayボタンをクリックしてplay( )メソッドを呼び出す必要があります。
pause( )メソッドはアニメーションを「一時停止の状態にする」働きしか持っていないため、「再開」機能を持たせたいときには工夫が必要です。

fuction pause_and_play() {
    if(ani.playState == "running") {
        ani.pause();
    } else if(ani.playState == "paused") {
        ani.play();
    } else {
        return;
    }
}

pausebtn.addEventLisener("click",pause_and_play);

pauseボタンを押したとき、AnimationオブジェクトのplayStateプロパティを呼び出して現在の状態を調べるようにします。

１つ目の条件分岐、アニメーションの状態が「running（再生中）」であれば一時停止。
２つ目、もし現在「paused（一時停止中）であれば再生。
3つ目ではそれ以外の場合にpauseボタンを押しても何も起こらないように指定します。「それ以外の場合」というのはアニメーションがまだ始まっていない場合や、完了してしまっている場合です。

これでpauseボタンを２回押したときは、アニメーションが再開されるようになりました。

逆再生。

ani.reverse();

reverse( )メソッドは、アニメーションの再生方向を反転させて再生します。
これ、ちょっとクセがあるので詳しく触れておきますね。

const reversebtn = document.getElementById("reversebtn");
reversebtn.addEventListener("click",()=> ani.reverse());

⬆︎1番左にあるのが、reverseボタンです。
実際に操作してみてください。

先づ、アニメーション停止状態からreverseボタンを押すと、進捗100%の状態から進捗0%の状態に向かってアニメーションします。これはreverse( )メソッドが、

「再生方向を反転」
「アニメーション再生」

という、2つの処理をしていることになります。

その後。反転アニメーションが完了したあと、フツーにplayボタンを押すと、これまた逆再生されます（！）
reverse( )メソッドが行った処理のうち、「アニメーション再生」は完了したのですが、「再生方向を反転」した事実はそのまま残っているのですね。

さらに。
アニメーションが再生されている途中でreverseボタンを押した場合が不思議。⬆︎のボタンで試してみてください。
再生途中でreverse( )させると、アニメーションは「現在の地点」から0%の方向に向かって再生されます。

〜どうやらreverse( )メソッドによって、アニメーションの「進捗も反転」している模様。

たとえば順方向に再生させておき、進捗60%の地点。
ここでreverse( )メソッドを実行すると、

アニメーションの方向が反転するとともに、進捗度も反転します。
現在の進捗は40%となり、残り60%を消化してからアニメーションが完了します。

これで何が困るのか？
それは、アニメーション全体が完了するまでの所要時間がreverse( )メソッドが実行されたタイミングによって左右される、という点です。

setIntervalを使ったタイマー処理や、アニメーション完了を受け取るイベント処理などを実装する場合。そこにreverse( )メソッドを絡めるときには、不具合が出ないようにケアが必要になってきます。

強制終了。

finish( )は、アニメーションを完了状態にするメソッドです。
ある条件下において、アニメーションを強制終了させたい場合などに使えそうです。

現在のタイミングオプションでは、アニメーション完了後に最初の状態に戻ってしまうため、finish( )メソッドの様子が観察しづらいです。すこし修正しましょう。
アニメーション完了時の状態を指定するfillプロパティを「forwards」に指定すると、終了時の状態を維持することができます。

options.fill = "forwards";

これでOKです。このようにアニメーションのオプションやキーフレームをすぐに編集できてしまうのが、Web Animations APIの優れている点です。

finish用のボタンを準備し、実装してみましょう。

const finishbtn = document.getElementById("finishbtn");
finishbtn.assEventListener("click",()=> ani.finish());

finishボタン（1番右の▶︎▶︎）をクリックすると、アニメーションが停止中/再生中に関わらず、完了状態となります。
先ほどのreverseボタンと併用すると、終了状態が反転するのも観察できます。

「ほぼメディアプレーヤー」が実装可。

最後までお読みくださり、ありがとうございます。
今回はWeb Animations APIの再生や停止に関するメソッドについて紹介してきました。

今回のサンプルで使ったボタンを並べてみたものです⬆︎。
こうやって見てみると、ちょっとしたメディアプレーヤーと同等の制御が用意されていることがわかります。しかも

ani.pause();

といったようにごく短いメソッド1つで呼び出して実行することが可能です。Web Animations APIを使うことのメリットが見えてきましたね。

今回少し触れた、アニメーションの状態を取得する「playState」。次回はこちらを詳しく探っていきたいと思います。

ではまた〜 ♫