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 pathのstrokeDashoffsetを0にします。ここでは0.5秒かけて筆記アニメーションを行なっています。
.staggerTo($chocolateMessage,0.5,{ strokeDashoffset:0 },0.15);終わりに
以上で、TweenMax.jsでクリスマスケーキのイラストにアニメーションを加える方法を終わります。