Javascript　初めてのGSAPアニメーションの使い方　その7　TimelineMaxのラベルと同期処理

15359 ワード
gsap JavaScript jQuery JavaScript テキストリンク

前回の記事はこちら

Javascript　初めてのGSAPアニメーションの使い方　その6　TweenMax.setとTimelineMaxプロパティ

今回はTimelineMaxのラベルと同期処理について説明します。

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>

丸(.circle)→正方形(.square)→長方形(.rectangle)の順にアニメーションを設定します。
それぞれx軸方向へ100px動かします。

const tlshapes = new TimelineMax();
tlshapes.to('.circle', 1, { x: 100 })
.to('.square', 1, { x: 100})
.to('.rectangle', 1, { x: 100});

このとき個々の要素の動く順番やタイミングをコントロールするために
任意の名前でラベルが設定できます。

circleRectangleラベルで、丸が動くタイミングで長方形を一緒に動かします。

const tlshapes = new TimelineMax();
tlshapes.to('.circle', 1, { x: 100 }, 'circleRectangle')
.to('.square', 1, { x: 100})
.to('.rectangle', 1, { x: 100},'circleRectangle');

次にsquareRectangleラベルで正方形と長方形を一緒に動かします。

const tlshapes = new TimelineMax();
tlshapes.to('.circle', 1, { x: 100 })
.to('.square', 1, { x: 100},'squareRectangle')
.to('.rectangle', 1, { x: 100},'squareRectangle');

ラベルの中に秒数を設定すると同期処理の中で時間差をつけることができます。

const tlshapes = new TimelineMax();
tlshapes.to('.circle', 1, { x: 100 })
.to('.square', 1, { x: 100},'squareRectangle')
.to('.rectangle', 1, { x: 100},'squareRectangle+=0.25');

正方形の動き出しから0.25秒後に長方形が動き出します。

マイナス数値を入れることで動き出しを早めることもできます。

const tlshapes = new TimelineMax();
tlshapes.to('.circle', 1, { x: 100 })
.to('.square', 1, { x: 100},'squareRectangle')
.to('.rectangle', 1, { x: 100},'squareRectangle-=0.25');

長方形は正方形と同期していますが0.25秒早く動き出します。

ラベルはつけずに秒数のみ調整することも可能です。

const tlshapes = new TimelineMax();
tlshapes.to('.circle', 1, { x: 100 })
.to('.square', 1, { x: 100}, '-=0.5')
.to('.rectangle', 1, { x: 100}, '-=0.5');

正方形と長方形の動き出しを-0.5秒することで滑らかに動かしています。

数値のみを指定するとアニメーションの中で絶対値の秒数を指定できます。

const tlshapes = new TimelineMax();
tlshapes.to('.circle', 1, { x: 100 })
.to('.square', 1, { x: 100},3)
.to('.rectangle', 1, { x: 100},3);

アニメーション開始から３秒経過後に正方形と長方形が動き出します。

次回はTimeline制御と開始位置制御です

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