ツクログ

tsukulognet

tsukulognet

道産子。Reactでなまら面白いものを作りたい。

TweenMax.jsでクリスマスケーキのイラストにアニメーションを加える方法

eye catch

TweenMax.jsでクリスマスケーキのイラストにアニメーションを加える方法です。

DEMO

ケーキのイラストを制作する

始めにケーキのイラストを制作しなければいけません。ケーキのイラストはillustratorで制作します。イラストの制作において注意すべき点は以下の2点です。

1. レイヤー名はどんなオブジェクトか分かるように

レイヤー名は後にSVGコードのidとなります。ですから、一目でどんなオブジェクトか分かるようなレイヤー名にします。

【ここにレイヤー名のキャプチャー】

2. 文字はオブジェクトに変換する

後に筆記アニメーションを行なうために、文字はオブジェクトに変換します。

イラストが完成したらSVGコードを取得

JavaScriptでイラストにアニメーションを加えるために、イラストが完成したらSVGコードを取得します。

取得方法は簡単です。「別名で保存」に進むと別ウィンドウが開くので、生成されたSVGコードをコピーしておきます。コードを見ていくと、レイヤー名がそのままidとなっていることが確認できます。

SVGコードを編集

先ほどコピーしたSVGコードをHTMLファイルに貼り付けます。続けて、わかりやすくするために、直接タグに指定されていたスタイルを消して、代わりに汎用クラスを追加します。汎用クラスはカラー.color-*.shadowの2つです。

CSSでスタイリング

CSSでは以下のことをしています。

汎用クラスを作成

先程HTML要素に追加した色や影に関する汎用クラスを作成します。

ケーキの初期設定

始めは何もない状態からアニメーションがスタートするので、CSSでは主に初期設定としてvisibility: hidden;で全要素を非表示にしています。

尚、非表示にはvisibility:hidden;を用います。display:none;ではない理由としては、display:none;ではふわりとした表示ができないためです。

筆記アニメーションさせるために

チョコレートに描く文字.chocolate-message pathには、筆記アニメーションを行なうために初期設定として以下を指定します。

.chocolate-message path { fill: none; stroke: #FFCC99; stroke-width: 1; stroke-dasharray: 100; stroke-dashoffset: 100; }

JavaScriptでケーキにアニメーションを加える

いよいよJavaScriptでケーキにアニメーションを加えます。アニメーションにはjQueryプラグインTweenMax.jsを用います。

Tweenmaxを読み込む

以下のコードをHTMLの</body>直前に追加します。※事前にjQuery本体も読み込む必要あり。

TweenMax.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js">

TweenMaxの使い方

今回のようなストーリー性のあるアニメーションはTweenMaxのタイムライン記法で作成します。

タイムライン記法

タイムライン記法は以下のようにnew TimelineMax()でタイムラインを生成してから、それに続けてアニメーションのコードを書いてイきます。

タイムライン記法例
var tl = new TimelineMax(); tl.set($foundation,{ y:25, autoAlpha:1 }) .set($sideCream,{ scaleX:0, autoAlpha:1 }) .to($foundation, 0.25, { y:0, ease:Power2.easeIn })

尚、上記のコードにもありますが、TweenMaxにおいて一つの要素をアニメーションさせるには.set().to()を用います。

アニメーションさせる要素をセット

要素をアニメーションするには始めに要素をセットしなければいけません。要素のセットには.set()を用います。

.set()
tl.set($foundation,{ y:25, autoAlpha:1 })

.set()の引数には以下を指定することができます。

引数
第1引数 セットする要素
第2引数 要素のスタイル

尚、set()はあくまで準備であり、アニメーションは行われません。

セットした要素をアニメーション

.set()でセットした要素をアニメーションさせるには、.to()を用います。.to().set()の後に記述します。尚、to()のみの記述ではアニメーションは行われません。

.to()
.to($foundation, 0.25, { y:0, ease:Power2.easeIn })

.to()の引数には以下を指定することができます。

引数
第1引数 アニメーションさせる要素
第2引数 アニメーションの時間
第3引数 要素のスタイル
第4引数 アニメーション発動のタイミング

兄弟要素を連続してアニメーション

苺を配置させる場面ではstaggrToで連続してアニメーションさせています。staggerToは兄弟要素を連続してアニメーションさせることができます。勿論間隔も調節することができます。

.staggerTo()
.set($cutStrawberry2,{ y:-522, autoAlpha:1 }) .staggerTo($cutStrawberry2,0.25,{ y:0, ease:Expo.easeOut },0.25)

.staggerTo()の引数には以下を指定することができます。

引数
第1引数 アニメーションさせる要素群
第2引数 アニメーションの時間
第3引数 要素のスタイル
第4引数 アニメーション発動のタイミング

2つの要素を同時にアニメーション

遅延、早送り、時間を上手く調整してタイミングを合わせることで、2つの要素を同時にアニメーションさせることもできます。今回いえばナイフでクリームを塗る場面で行われています。

.to($spatula,1.5,{ x:125.416 }) .to($spatula,1.5,{ x:250.832 }) .to($sideCream[0],1.5,{ scaleX:1 },'-=3') .to($sideCream[1],1.5,{ scaleX:1 },'-=1.5')

筆記アニメーション

筆記アニメーションは.chocolate-message pathstrokeDashoffset0にします。ここでは0.5秒かけて筆記アニメーションを行なっています。

.staggerTo($chocolateMessage,0.5,{ strokeDashoffset:0 },0.15);

終わりに

以上で、TweenMax.jsでクリスマスケーキのイラストにアニメーションを加える方法を終わります。

参考文献