今回はGSAPのアニメーションで進捗の値を使った実装例として、円形のプログレスバーを作成してみたいと思います。GSAPではアニメーション開始時のスタイル、終了時のスタイルを指定する形でそれらの変化をキーフレームとして自動的にアニメーションが組まれるようになりますが、アニメーション実行中の進捗の値を取得できたり、値を入れることでその進捗までアニメーションを移動させることも可能です。ここではプログレスバーを使って進捗値の取得や進捗状態をコントロールするコードを見ていきます。   GSAPの導入や基本の使い方については過去記事でもいくつかまとめていますので、合わせてご参考ください。 （過去記事） GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる＃3：スクロールで固定表示 GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる＃2：スクロール量に連動 GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる＃1：基本編 JavaScriptのアニメーションライブラリ「GSAP」を使ってみる    

アニメーション開始から終了までの進捗を値として表示

まずは今回のサンプルとなる円形のプログレスバーを用意していきます。HTML側では進捗バー本体と、進捗状況の数値を表示させておきます。その他はアニメーション開始ボタンなどコントローラー系のUIも合わせて作成します。CSSの方ではプログレスバー自体はドーナツ型になるので、円形で作成したのち、clip-pathでドーナツ型のSVGからパスの情報を指定しています。ここでは指定していませんが、JavaScriptでインジゲーター部分を「conic-gradient()」を使って扇型のグラデーションで表現していきます。

// HTML
<div class="chart">
  <div class="indicator js-animation-element"></div>
  <span class="progress js-animation-progress">0</span>
</div>
<div class="controller">
  <button type="button" class="js-animation-trigger">Play</button>
</div>

// CSS
.chart {
  position: relative;
}
.indicator {
  width: 240px;
  height: 240px;
  border-radius: 100%;
  clip-path: path("M120,240 C53.72583,240 0,186.27417 0,120 C0,53.72583 53.72583,0 120,0 C186.27417,0 240,53.72583 240,120 C240,186.27417 186.27417,240 120,240 Z M120,200 C164.18278,200 200,164.18278 200,120 C200,75.81722 164.18278,40 120,40 C75.81722,40 40,75.81722 40,120 C40,164.18278 75.81722,200 120,200 Z");
}
.progress {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.progress::after {
  content: "%";
}
.controller {
  display: flex;
}
.controller > button {
  margin: 0 10px;
}

  続いてGSAPの処理になります。「fromTo()」でアニメーションの開始と終了のスタイルを指定します。今回は扇型のグラデーションでドーナツチャートのように見せるので、角度を一周するように設定します。このアニメーション設定は後から進捗値の値を操作するため、トゥイーンとして変数化しておき、初期化処理では一時停止しておきます（そのままではアニメーションが実行されてしまうため）そして、再生ボタンをクリックしたときにアニメーションが実行されるように処理を作成していきますが、アニメーション処理の重複を防ぐため「.isActive()」でアニメーションが実行されていない場合のみアニメーションが再生されるようにします。その際に「eventCallback()」を使って「onUpdate」のイベントでコールバック処理を行うことでアニメーションの進捗が更新されるたびに、進捗状況の数値も更新されるようにコールバック関数内での処理を追加します。この時に先ほど変数化しておいたトゥイーンに対して「progress()」メソッドを使うことで、その時点でのアニメーションの進捗値を取得することができます。

const playButton = document.querySelector('.js-animation-trigger');
const tween = gsap.fromTo('.js-animation-element',
  {
    backgroundImage: 'conic-gradient(#ff6161 0deg, #ccc 0deg)',
  },
  {
    backgroundImage: 'conic-gradient(#ff6161 360deg, #ccc 360deg)',
    duration: 8,
    ease: 'none'
  }
);
const init = () => {
  tween.pause();
}
const run = (button) => {
  button.disabled = true;
  if(!tween.isActive()) {
    tween.play().eventCallback('onUpdate', () => {
      document.querySelector('.js-animation-progress').innerText = Math.floor(tween.progress() * 100);
    });
  }
}
playButton.addEventListener('click', (event) => {
  run(event.target);
});
init();

  これで進捗値を取得して画面に出力されるプログレスバーができました。今回のサンプルはこちらに用意しています。進捗値の数値もリアルタイムで更新されているのがわかりますね。    

アニメーションの再生と一時停止、リセットのコントロール

GSAPではアニメーションの再生はもちろん、実行中のアニメーションに対して一時停止や逆再生、タイムライントラックの移動など自由にコントロールできるメソッドが用意されています。先ほど作成したサンプルはアニメーションの再生のみでしたが、一時停止や先頭に戻る処理も追加してみたいと思います。まずは、HTML側で一時停止とリセット用のボタンを用意します。プログレスバーの部分に関しては共通となります。

<div class="chart">
  <div class="indicator js-animation-element"></div>
  <span class="progress js-animation-progress">0</span>
</div>
<div class="controller">
  <button type="button" class="js-animation-trigger">Play</button>
  <button type="button" class="js-animation-pause">Stop</button>
  <button type="button" class="js-animation-reset">Reset</button>
</div>

  続いてGSAPで処理を作成していきます。再生部分については先ほどのサンプルと同じですが、一時停止とリセットの処理が追加されています。一時停止をする際には指定したトゥイーンに対して「pause()」メソッドを実行することで実現できます。また、リセットしてアニメーションのタイムライン先頭に戻すには、「seek()」メソッドの引数に0を入れる形になります。このメソッドには引数にタイムライン上の進行時間を入れることで、その時点に移動させることができます。今回は先頭の開始時点に戻すため0が入ります。そして「pause()」メソッドで一時停止状態でスタンバイするようにしておきます。

const playButton = document.querySelector('.js-animation-trigger');
const pauseButton = document.querySelector('.js-animation-pause');
const resetButton = document.querySelector('.js-animation-reset');
const tween = gsap.fromTo('.js-animation-element',
  {
    backgroundImage: 'conic-gradient(#618eff 0deg, #ccc 0deg)',
  },
  {
    backgroundImage: 'conic-gradient(#618eff 360deg, #ccc 360deg)',
    duration: 8,
    ease: 'none'
  }
);
const init = () => {
  tween.pause();
  pauseButton.disabled = true;
  resetButton.disabled = true;
}
const run = (button) => {
  button.disabled = true;
  pauseButton.disabled = false;
  if(!tween.isActive()) {
    tween.play().eventCallback('onUpdate', () => {
      document.querySelector('.js-animation-progress').innerText = Math.floor(tween.progress() * 100);
    });
  }
  tween.eventCallback('onComplete', () => {
    pauseButton.disabled = true;
    resetButton.disabled = false;
  });
}
const stop = (button) => {
  button.disabled = true;
  playButton.disabled = false;
  tween.pause();
}
const reset = (button) => {
  button.disabled = true;
  playButton.disabled = false;
  pauseButton.disabled = true;
  tween.seek(0).pause();
  document.querySelector('.js-animation-progress').innerText = 0;
}
playButton.addEventListener('click', (event) => {
  run(event.target);
});
pauseButton.addEventListener('click', (event) => {
  stop(event.target);
});
resetButton.addEventListener('click', (event) => {
  reset(event.target);
});
init();

  必要に応じてボタンUIを非活性化したりするとより操作性も上がりますね。このサンプルはこちらに用意しています。動画プレイヤーのように自由にアニメーションの再生をコントロールできるようになりました。    

進捗を指定したアニメーションのシーク

最後に上記のサンプルをさらに応用したものを見ていきます。今までのものは進捗値を取得するだけでしたが、今回は事前に用意した値を進捗値に使えるようすることで、アニメーションのシーク機能を追加してみます。まずは、HTMLでレンジ型のインプットを用意し、進捗値に使える値を設定できるようにしておきます。

<div class="chart">
  <div class="indicator indicator3 js-animation-element"></div>
    <span class="progress progress3 js-animation-progress">0</span>
  </div>
<div class="controller">
  <button type="button" class="js-animation-trigger">Play</button>
  <input type="range" min="0" max="100" value="0" step="10" class="js-animation-seek">
</div>

  JavaScriptではこれまで同様、進捗値を取得してプログレスバーのアニメーションを作成していきますが、トゥイーンに対しての「progress()」メソッドの引数に進捗値を入れることで、アニメーション自体の進捗を更新できるように変更します。進捗値はHTML側で用意したレンジ型のインプット要素の値が入るようにします。

const playButton = document.querySelector('.js-animation-trigger');
const seekBar = document.querySelector('.js-animation-seek');
const tween = gsap.fromTo('.js-animation-element',
  {
    backgroundImage: 'conic-gradient(#3eb72c 0deg, #ccc 0deg)',
  },
  {
    backgroundImage: 'conic-gradient(#3eb72c 360deg, #ccc 360deg)',
    duration: 8,
    ease: 'none'
  }
);
const init = () => {
  tween.pause();
}
const run = (button) => {
  button.disabled = true;
  if(!tween.isActive()) {
    tween.play().eventCallback('onUpdate', () => {
      document.querySelector('.js-animation-progress').innerText = Math.floor(tween.progress() * 100);
    });
  }
  tween.eventCallback('onComplete', () => {
    seekBar.value = 0;
  });
}
const track = (range) => {
  tween.progress(range.value / 100).pause();
  document.querySelector('.js-animation-progress').innerText = range.value;
  playButton.disabled = false;
}
playButton.addEventListener('click', (event) => {
  run(event.target);
});
seekBar.addEventListener('change', (event) => {
  track(event.target);
});
init();

  これで進捗値を自由にコントロールできる機能が実現できました。このサンプルはこちらに用意しています。先ほどの一時停止やリセットなどと組み合わせることで、アニメーションを自由に動かすことができますね。    

進捗値の調整やアニメーションの状態をコントロールするメソッド

今回のサンプルではアニメーションを自由にコントロールするためのいろんなメソッドを使いました。GSAPではこのようにトゥイーンに対する各種メソッドがデフォルトで用意されており、それらを活用することでより細かく挙動を指定できるようになります。たくさん種類はありますが代表的なものをいくつかピックアップしました。  

tween.progress( VALUE )	アニメーションの進捗を取得、もしくは進捗を更新することができます。引数を空にすると進捗値を受け取り、引数に値を入れるとその値に応じた進捗にアニメーションが更新されます。
tween.isActive()	指定したアニメーションが実行中かどうかをチェックすることができます。アニメーション実行中は操作を防ぐなどの場合に使えます。
tween.eventCallback( EVENT, CALLBACK )	指定したアニメーションの状況に応じて、処理を追加することができます。第一引数には「onUpdate」「onComplete」「onStart」などのイベントを指定し、第二引数にコールバック関数を指定します。
tween.play()	指定したアニメーションを再生します。
tween.reverse()	指定したアニメーションを逆再生します。
tween.pause()	指定したアニメーションを一時停止します。
tween.seek( TIME )	指定したアニメーションの特定のタイムラインまで移動します。引数には秒数を数値で入れると、その時点までアニメーションのタイムラインが移動します。

 

---

  GSAPではこのようにアニメーションをユーザー側の操作でコントロールできる仕組みが用意されており、自由度の高い要件も簡単に実装することができます。GSAPを使うことで見せるアニメーション以外にも操作するアニメーションも手軽に実現できるのはとても便利ですね。   （参考にさせていただいたサイト） GreenSock Tween