TweenMax1.18で追加されたcycleプロパティと相対カラーアニメーションについて

おじいちゃん

2015.10.16

Web制作

こんにちは、おじいちゃんです。

今回は先月バージョンアップしたTweenMax1.18で追加された、cycleプロパティとHSLでの相対カラーアニメーションをご紹介したいと思います。

TweenMaxの導入方法については、づやさんの記事を参考にしてみてください。

アニメーションに便利なJavaScriptライブラリTweenMaxを使ってみる（その1）

Kazuya Takato

2014.12.01

まずは簡単にTweenMaxのstaggerについて説明したいと思います。

staggerとは

staggerは指定した配列に対して、時間差でアニメーションをつけることができます。

staggerにはstaggerFrom、staggerTo、staggerFromToの3種類があり、下記の特徴を持っています。

staggerTo : アニメーション終了値を指定
staggerFrom : アニメーション開始値を指定
staggerFromTo : アニメーション開始値と終了値を指定

staggerFromToを使ったサンプルを見てみましょう。

<div class="text_box text_box_01">
    <span class="text">A</span>
    <span class="text">B</span>
    <span class="text">C</span>
    <span class="text">D</span>
    <span class="text">E</span>
    <span class="text">F</span>
    <span class="text">G</span>
    <span class="text">H</span>
</div>

TweenMax.staggerFromTo(
    '.text_box_01 .text',    //DOMの指定
    1,                        //アニメーションの速度
    {y:100,autoAlpha:0},    //実行前のスタイル
    {y:0,autoAlpha:1},        //実行後のスタイル
    0.05                    //次の要素を発火させるまでの待ち時間
);

sample_01

textクラスを持っているDOMに対して、1つめは1秒かけてtranslateY(100px)からtranslateY(0px)にフェードイン、その0.05秒後に2つめがフェードイン、その0.05秒後に3つめがフェードイン・・・というアニメーションです。

これがTweenMaxのstaggerを使った挙動になります。

それでは今回から追加されたcycleプロパティを見てみましょう。

cycleプロパティの追加

cycleプロパティは、staggerで指定した配列に対して、個別の値を指定することができ、前述してあるstaggerTo、staggerFrom、staggerFromToで利用することができます。

cycleの使い方

cycleで扱いたいプロパティに任意の配列を渡すことで、アニメーションすることができます。

TweenMax.staggerFromTo(
    '.text_sample_02 .text'
    ,0.4,
    {cycle:{y:[100,-100]},autoAlpha:0},    //cycleプロパティに任意に指定したい値を配列にして渡す
    {y:0,autoAlpha:1},
    0.05
);

sample_02

1つめの開始位置をtrasnlateY(100px)、2つめの開始位置をtrasnlateY(-100px)、3つめの開始位置をtrasnlateY(100px)・・・といった指定をcycleは可能にしてくれます。

関数を呼び出す

関数を呼び出して乱数で返すこともできます。

TweenMax.staggerFromTo(
    '.text_box_03 .text',
    1,
    {cycle:{set,y:setRandom},autoAlpha:0},
    {x:0,y:0,autoAlpha:1}
    ,0.05
);
function setRandom(){
    return  (Math.random() * 400) - 200;
}

sample_03