SVGと戯れる 第2話「大量のSVGイラストに個別でアニメーションをつける with Snap.svg 中編」DevJam

こんにちは、ヤムチャーtsukasaです。 前回はSVGを用意するとこまで解説しました。フロントエンド編は書いてみると予想以上に長くなったので、今回はsvgの準備からマウス移動の視差効果の付加まで解説します。パーツのアニメーション付加は後編で解説します！ 各種ライブラリを用意する jQuery（無くてもいいですが、今回のサンプルで使ってます） Tweenエンジン（今回はTweenLiteを使用しています） Snap.svg TweenエンジンはjQueryのAnimateでも何とかなりますが、滑らかさや柔軟性を考えるとTweenエンジンの方がいいです。 もしTweenエンジンのライブラリ容量さえも気になるコンテンツであれば、今回のようなSVGコンテンツは見送った方がいいでしょう。 また、書き出されたSVGのidをフックにするため、svgにできる圧縮は改行やスペース等を取ることぐらいで、極端

[yohawing]

”mousemoveやdeviceorientationはイベントの発火回数が非常に多いので、underscore.jsやlodash.js等のthrottle用いて発火回数を間引いてあげると負荷が軽減されます。”　　ほうほう