GSAP 1.18.0 で追加された新機能

目次

GSAP は TweenMAX, TimeLineMax などの GreenSock が提供しているアニメーションコンテンツの制作を支援するためのライブラリ群なのですが、先日 v1.18.0 がリリースされました。

Introducing GSAP 1.18.0

詳細は上記の記事で書かれているのですが、自分用のメモとして変更点を記事にしておこうかと思います。

GSAP 1.18.0

特に大きな変更として以下の機能の追加があげられています

  • cycle プロパティが staggerTo, staggerFrom, staggerFromToで指定できるようになりアニメーションのバリエーションがより豊富に
  • HSL 形式の値を相対的に指定してアニメーションさせることができるようになった
  • 1px 5px rgb(255,0,0) のように一括で指定されたような複雑な値も tween させられるようになった

一つ一つ見ていきます。

新しく追加された cycle プロパティ

新しく追加された cycle プロパティは staggerFrom(),staggerFromTo(),staggerTo() で利用することができます。

stagger~ で何ができたのかをおさらい

まずこれまでの staggerFrom(),staggerFromTo(),staggerTo() で何ができたのかを再確認していきます。

stagger はスタートをずらすという意味です。 以下の様なコードを書くことで、1度にたくさんのオブジェクトの実行開始時間をずらしながらアニメーションさせることができるというものでした。

TweenMax.staggerTo('.box', 2, { // boxクラスの要素を2秒間で
    rotationY: 360,
    rotationZ: 360,
    y: 10,
    x: 100,
    opacity: 1
}, 0.3); // スタートを 0.3秒ずつずらす

DEMO

See the Pen b7b9c07873bc87ee5484e403b35a5c21 by turusuke (@turusuke) on CodePen.

Cycle プロパティを利用してみる

今回実装された cycle プロパティを試してみます。 cycle は各 stagger の vars で指定します。

TweenMax.staggerTo( targets:Array, duration:Number, vars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* ) : Array

先ほどのデモで使ったコードを cycle を使ったコードに書き換えてみます。

TweenMax.staggerTo('.box', 2, {
    y: 10,
    cycle: {
        x: [10, 20, 30],
        opacity: [0.5,0.8,1],
        rotationZ: [10, 20, 30],
        rotationY: [0, 20, 40, 60]
    }
}, 0.2);

cycle プロパティにアニメーションの対象とするプロパティをオブジェクトで渡し、値は配列で指定しています。

これを設定することで以下のようなアニメーションが作成されます。

DEMO

See the Pen cycle by turusuke (@turusuke) on CodePen.

cycle は配列で渡した値を要素の先頭から順番に割り当ててくれるものです。 具体的に先ほどのコードの例で説明すると、x プロパティの場合は

x: [10, 20, 30] という値を渡していました。これによってそれぞれの要素は

1番目の要素 ... x = 10
2番目の要素 ... x = 20
3番目の要素 ... x = 30
4番目の要素 ... x = 10
5番目の要素 ... x = 20
5番目の要素 ... x = 30

のように要素のインデックス順に配列の値が割り当てられ、アニメーションの終着ポイントが決まります。

関数を渡す

cycle で渡すオブジェクトの値には関数を指定することもできます。

関数内で処理を書いて、最後に return した値がそれぞれの要素に渡されるようになっています。

引数には要素のインデックス番号が渡されてくるので、何番目の要素だけアニメーションさせたいとかいった時にはこれを利用します。

this には対象となっている要素が割り当てられているので、現在の位置を取得して色も一緒に変化させる…なんてこともできます。

それではこの手法を実際に試してみます。

DEMO

x,y の位置を円状に配置するアニメーションを作ってみます。

TweenMax.staggerTo('.box', 2, {
    cycle: {
        x: function (index) {
            var rad;
            rad = index * 36 * Math.PI / 180;
            return Math.sin(rad) * 100;
        },
        y: function (index) {
            var rad;
            rad = index * 36 * Math.PI / 180;
            return Math.cos(rad) * 100;
        },
        opacity: [0.5,0.8,1],
        rotationZ: [10,20,30],
        rotationY: [0,20,40,60]
    }
}, 0.2);

See the Pen cycle > function by turusuke (@turusuke) on CodePen.

HSL 形式の値を相対的に指定することができるようになった

背景色を明るくしたり鮮やかにするような操作を行いたい場合、HSL色空間 を利用すると自然な色を表現できるので便利です。

しかし、JavaScript でもとの値を取得して明るくしたり鮮やかにしたいといった場合は、現在の HSL のそれぞれの値を初めから変数で管理しておくようにしたり、16進数表記で指定されていた場合は HSL へと変換する必要がありました。

v1.18.0 では以下の構文のように現在の色の HSL それぞれの値へ +=,-= を使い、アニメーションの変化を簡単につけられるようになっています。

TweenMax.to(".box", 5, {
    backgroundColor: "hsl(+=360, +=0%, +=0%)" // 現在の色の色相を5秒で360度加算する
});

アニメーションの対象となっている要素には background-color: #F1E888 が指定されていますが、うまくアニメーションしてくれています。

DEMO

See the Pen hsl animation by turusuke (@turusuke) on CodePen.

複雑な文字列の値でも Tween できるようになった

これはどういうことなのかというと、文字列の中に複数の値が含まれていた場合、例えば CSS プロパティで言えば margin の一括指定(margin: 0 100px 0 100px)のようなものや SVG の polygon の points プロパティ(points="100,120 140,160 180...)のようなプロパティの値の中に複数の値が含まれているものも Tween させることができるようになったということです。

GSAP は現在の値と、指定された値を比較して対応している値が変更されていればアニメーションするようにしてくれます。

DEMO(margin の値を一括指定した例)

See the Pen Tween complex string-based values by turusuke (@turusuke) on CodePen.

DEMO(SVG の path 要素の d 属性をアニメーションさせる例)

See the Pen 4b36f94f4f7e226424cb67301da45fd8 by turusuke (@turusuke) on CodePen.

d 属性には沢山のパスデータが書かれていますが、値をパースしたりすることなくパスデータをもう一つ用意して指定してあげるだけでモーフィングのようなアニメーションを作成することができました。