Javascript 初めてのGSAPアニメーションの使い方 その8 Timeline制御と開始位置制御

前回の記事はこちら
Javascript　初めてのGSAPアニメーションの使い方　その7　TimelineMaxのラベルと同期処理

今回はtimelineの制御について説明します。

以下のhtmlを準備します。※配置と色はCSSで調整しています。

    <div class="row row1">
      <div class="column col1">
        <p>パネル 1 (.circle)</p>
        <div class="circle shape"></div>
      </div>
      <div class="column col2">
        <p>パネル 2 (.square)</p>
        <div class="square shape"></div>
      </div>
      <div class="column col3">
        <p>パネル 3 (.rectangle)</p>
        <div class="rectangle shape"></div>
      </div>
    </div>
    <!--row1 -->

    <div class="row row2">
      <div class="column col4">
        <p>パネル 4 (.triangle)</p>
        <div class="triangleContainer">
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
        </div>
        <!--triangle container -->
      </div>
      <div class="column col5">
        <p>パネル 5 (.oval)</p>
        <div class="oval shape"></div>
      </div>
      <div class="column col6">
        <p>パネル 6 (.pacman)</p>
        <div class="pacman shape"></div>
        <div class="pacman shape"></div>
        <div class="pacman shape"></div>
        <div class="pacman shape"></div>
        <div class="pacman shape"></div>
        <div class="pacman shape"></div>
        <div class="pacman shape"></div>
        <div class="pacman shape"></div>
      </div>
    </div>
    <!--row1 -->

    <div class="playback_controls_row">
      <a href="#0" class="playbackButton playButton">Play</a>
      <a href="#0" class="playbackButton pauseButton">Pause</a>
      <a href="#0" class="playbackButton resumeButton">Resume</a>
      <a href="#0" class="playbackButton reverseButton">Reverse</a>
      <a href="#0" class="playbackButton slowButton">Slow</a>
      <a href="#0" class="playbackButton fastButton">Fast</a>
      <a href="#0" class="playbackButton seekButton">Seek</a>
      <a href="#0" class="playbackButton progressButton">Progress</a>
    </div>

##timeline制御

まずはtimelineを作成してstaggerFromで連続したアニメーションにします。
x軸方向50px、y軸方向50pxの位置、opacity0の状態から
0.2秒の時間差で.shapeクラスのついた要素をアニメーションします。

要素の取得はJqueryで記述します。

const tlShapes = new TimelineMax();

tlShapes.staggerFrom('.shape', 0.5, {x: 50, y:50, opacity:0},0.2);

下のボタンにそれぞれtimeline制御の操作を設定します。

###play/pause

$('.playButton').click(function(){
  tlShapes.play();
});

$('.pauseButton').click(function(){
  tlShapes.pause();
});

pauseボタンで一時停止、playボタンで再開の制御を設定できました。

###resume/reverse

$('.resumeButton').click(function(){
  tlShapes.resume();
})

$('.reverseButton').click(function(){
  tlShapes.reverse();
})

reverseボタンでアニメーションの逆再生、resumeボタンで再生方向の再生を設定しました。

playの場合はアニメーションは順方向に必ず再生されますが
resumeでは進行中のアニメーションの方向に再生ができます。

reverse再生したものを止めて再びreverse方向に再生したい時に使いましょう。

###timeScale

$('.slowButton').click(function(){
  tlShapes.timeScale(0.5);
})
$('.fastButton').click(function(){
  tlShapes.timeScale(1.5);

timeScaleを使うとスピードの速さを比率で制御できます。
slowボタンには0.5倍速、fastボタンには1,5倍速を設定しました。

###seek/progress

$('.seekButton').click(function(){
  tlShapes.seek(0.2);
})
$('.progressButton').click(function(){
  tlShapes.progress(0.8);
})

seekは指定した秒の箇所からアニメーションを再生します。
上記では全体の0.2秒後から再生

progressは指定したパーセンテージの箇所からアニメーションを再生します。
上記では全体の８０％の位置から再生

##開始位置制御

シンプルなTweenMaxではアニメーションの開始位置は
htmlとCSSで書かれた場所になります。

下記では円を左右中央揃えしたポジションが０の位置です。

以下のコードでは上記を起点にしてx軸方向にアニメーションは動きます。

TweenMax.to ('.circle', 1, {x:100});

以下のようにfromToを使用すると第３引数と第４引数で開始位置と終了位置を指定できます。

TweenMax.fromTo('.circle', 1, { x: -100, scale:0}, {x:100, scale:1.5});

開始位置を-100px,終了位置を100pxの方向にアニメーションさせています。
位置以外のプロパティ（scaleなど）も一緒に指定することができます。

staggerにstaggerFromToとすることで開始と終了位置を指定できます。
以下はx軸y軸方向に起点と終点を設定しています。

TweenMax.staggerFromTo('.triangle', 1, { y:200, x:200},{ y:-50, x:-50},0.2)

初期位置

アニメーション

少しわかりにくいですが起点が右下に200pxずれて終点は左上に50ｐｘずれています。