SVGアニメーションまとめ
ロゴ作ってるときに「こんなんやってみたいなー」ってのがあったのでそれを形にしてみました。チェックマーク部分を目にしてそれをゴニョゴニョ…
スマホで見る
まず完成形から （やってみたかったこんなんがコレ）
手順一覧
- 通常ロゴのチェックマーク部分を目に差し替える
- 目をキョロキョロさせる
- 目パチさせる
- キョロキョロと目パチを合わせる
アニメーションさせるためにパーツごとに記述を分けとくのがポイントかと。
一見するとそんなに複雑なアニメーションではないけど、animate や animateTransform のルールが最初ちょっとわからなくて戸惑った。仕組みがわかると単純なんだけど、もうちょっと簡単に実装する方法はないもんかな… flash から html5 コード化するプラグインみたいな感じで変換できるやつとかさ。
イージング値を設定する為の記述は svg要素の基本的な使い方まとめ 12.アニメーション がとても参考になりました！
