各種ライブラリについて

アニメーション・svg描画準備系

animation – 最近のJS&CSSアニメーションライブラリまとめ – Qiita
http://qiita.com/tejitak/items/de7fbed9bf22b9037526#createjs

snap.svgとついーんめっこす（GSAP）で動かすてみますた。
svgのアニメーション系どれがいいのって話。（半世紀前に終わってそうですねすみません）
普通に動かすとカクカク重かったとです。
下記が実際に描いてみたコード

[html]
//prepare for SVG animation
function showSVG(){
// t.svg1.flower.attr({ transform: ‘s0,0’ });
t.svg1.flower.attr({ ‘path’ : t.svg1.maxSize });
$(‘#svgArea’).css({‘visibility’:’visible’});
//座標変更
// t.svg1.flower.animate({ transform: ‘t100,100’ }, 800, mina.bounce);
//スケール(重い)
// t.svg1.flower.animate({ transform: ‘s0,0’ }, 800, mina.easeinout);
// t.svg1.flower.animate({ transform: ‘s0,0’ }, 800);
//変形(重い→0からへんかさせるよりは軽くなった)
// t.svg1.flower.animate({ path: t.svg1.minSize }, 600, mina.easeinout);
TweenLite.to(“#aaa”, 1, {scale:0,transformOrigin:”50% 50%”});
// TweenLite.to(“#aaa”, .6, {scale:0,transformOrigin:”50% 50%”,ease: Power0.easeOut});
// t.svg1.flower.animate({ ‘r’ : t.svg1.maxSize }, t.loading.speed/2, t.loading.easing);
// t.svg1.flower.animate({ ‘r’ : t.svg1.maxSize }, t.loading.speed, t.loading.easing);
// $(‘#loadingImg’).removeClass().addClass(‘chara’+(1+parseInt(Math.random()*4)));
// $(‘#loadingInner’).addClass(‘shown’).show();
}
[/html]

・描画の快適さ
スケール動かす＜pathを動かす
snap.svg＜TweenMax＜TweenLite

ただし

ついーんめっこすで動かすときはtransform-originに気をつける
SVG Animation and CSS Transforms: A Complicated Love Story | CSS-Tricks

SVG Animation and CSS Transforms: A Complicated Love Story

[html]
TweenMax.to(“#svg, #div”, 2, {
rotation:360,
transformOrigin:”50% 50%”
});
[/html]

あと、GSAPではdashtray?点線のやつやfillの変更などの高度なSVG用プロパティは専用プラグイン（有料）がないといじれないらしい。
商用プランは年150＄もします。。。。便利だけどね。超便利。

軽量化・圧縮

圧縮用。不要な記述やID、改行を削除するやつ〜〜
SVGOMG – SVGO’s Missing GUI
https://jakearchibald.github.io/svgomg/

ブラウザから SVGO で SVG ファイルを最適化できる 「SVGOMG」 | WWW WATCH
https://hyper-text.org/archives/2015/02/svgomg.shtml

見た目のクオリティはそのままで、SVGファイルを大幅に軽量化する便利ツール -SVGO GUI | コリス

見た目のクオリティはそのままで、SVGファイルを大幅に軽量化する便利ツール -SVGO GUI

ライブラリでのアニメーション

JavaScriptライブラリTweenMaxでSVGアニメーションを扱う方法 | 株式会社LIG
http://liginc.co.jp/web/js/other-js/168856

最近の文献よくわかんねぇよ！
Snap.svgはs0,0っていう指定がよくわからなくて途中泣きそうになったよ
Snap.svg Tutorial
http://svg.dabbles.info/snaptut-transform

svgの注意点

htmlの他の要素と違ってz-indexの概念がない。
描画順（or記述順）が重なり順。
変更するには
・DOMをいじっておく
・JSで記述位置を変更する（jqueryやsnap.svgのappend,prependで位置を変更する）
などの対応が必要

描画始点のポイント

描画の始点をどこにするかも重要。
例えば
[html]

[/html]
とすれば中央が始点となるので、下記の場合は数値より便利。

• xyを中央から画面外にフェイドアウトさせる
• もしくは画面外から中央に集める
• はたまたブラウザ中央からの位置で配置する

どのみち使い方による。