【GSAP】roughイージングのカスタマイズ方法

今日はイージング「rough」のカスタマイズ方法について説明していきたいと思います。

ジグザグで面白い動きが出せる「rough」。
かなり細かいところまで自分でカスタマイズできるようになりますよ。

基本の使い方

このイージングを使用するためには、「EasePack」というファイルが必要です。
公式サイトにインストールの方法が書かれているので、こちらを参考にファイルを取り込んでください。

See the Pen sample-rough by Michi (@Michi_) on CodePen.

デフォルトの動きで十分OK！という場合はeaseプロパティにroughを指定するだけ。
とても簡単です。

ただし、自分の思い通りの動きにカスタマイズするためには、さまざまなオプションのプロパティを設定する必要があります

カスタマイズするために使用するプロパティについて説明していきます。

数字を設定します。

イージングに沿って打つポイント（地点）の数を決めることができます。
数が大きくなるほど頻繁に折り返してジグザグに動きます。

デフォルトは「20」です。

ブール値、つまり真（true）か偽（false）かを設定します。

「true」を設定した場合、ポイントの位置はアニメーションに設定した始めの値と終わりの値の間に収まるように設置されます。
「false」を設定すると、アニメーションに設定した始めの値と終わりの値を超えて設置されます。

デフォルトは「false」です。

ブール値を設定します。

「true」の場合はポイントの位置がランダムに設定されますが、「false」にすると、ポイントがイージング全体に対して均等に配置されるようになります。

デフォルトは「true」です。

数字を設定します。

ポイントが、後述するtemplateプロパティで設定したイージングの動きからどれだけ離れるかをコントロールできます。

数字が小さければ小さいほど、templateプロパティで設定したイージングの動きに近く、逆に大きな数字になるほど、templateプロパティで設定したイージングの動きからかけ離れていきます。

デフォルトは「1」です。

“in” “out” “both” “none”　の中からひとつ選択して設定します。

ジグザグの動きに緩急をつけることができます。

デフォルトは「none」です。

全体のベースとなるイージングを設定できます。

例えば、「template: bounce.in」などのように、ベースとなるイージングを設定します。
ここで設定した動きをベースに、ジグザグの動きが追加されるというイメージです。

デフォルトは「none」です。

これらのプロパティを組み合わせることで、自在にお好みのアニメーションを作ることができます。

以下のように、カンマで区切っていくつでもプロパティを設定することができます。

gsap.to(".sample02", {
ease: "rough({template: power1.out, strength: 1, points: 30, randomize: false, taper: both})" 
});

こちらは初めに載せたサンプルの、ふたつ目のアニメーションの設定ですので、実際の動きをぜひ確認してみてください。

今日はroughイージングのカスタマイズ方法について説明しました。

それぞれのプロパティについてしっかり理解できれば、案外簡単にカスタマイズできるようになります。文字で説明を読んでいるだけではわかりにくい部分もありますので、ぜひご自身でも実際に触ってみてくださいね！

参考サイト