tomo.mobi

Representation design of material


snapサンプル

モバイルの古いブラウザをフォローしたいのならば、svgのアニメーションにはsnap.svgが良さそう!もちろんGreenSockはとても使いやすいのですばらしく良いです。
場合によって使い分けするのが良さそうです。
Snap.svg
http://snapsvg.io/

snapのサンプルです。
transform=”matrix(1,0,0,1,0,0)”
にて、赤い針の回転を表現。
http://www.tomo.mobi/test/snap/
これだったらAndroidの少し古いブラウザでも大丈夫そう。

今のシェア率からみると傾向としては、まだもうすこし古いブラウザ残りそうだしね。
参考資料:https://developer.android.com/about/dashboards/index.html
なお、Android5~の標準ブラウザはmatrix3D()が描画出来るような感じです。
参考資料:http://caniuse.com/#compare=android+44
参考良質記事:http://uupaa.hatenablog.com/entry/2014/04/15/163346

で、snap.svgのライブラリを使ってサンプルを作ってみました。
スクリーンショット 2015-10-22 23.43.40
青枠の中をタップするとほぼ中央に表示された青い★が円状に広がるサンプルです。
http://www.tomo.mobi/test/snap/starRing_snap.html