SVGアニメーションまとめ

ロゴ作ってるときに「こんなんやってみたいなー」ってのがあったのでそれを形にしてみました。チェックマーク部分を目にしてそれをゴニョゴニョ…


まず完成形から (やってみたかったこんなんがコレ)

手順一覧

  1. 通常ロゴのチェックマーク部分を目に差し替える
  2. 目をキョロキョロさせる
  3. 目パチさせる
  4. キョロキョロと目パチを合わせる

アニメーションさせるためにパーツごとに記述を分けとくのがポイントかと。

一見するとそんなに複雑なアニメーションではないけど、animate や animateTransform のルールが最初ちょっとわからなくて戸惑った。仕組みがわかると単純なんだけど、もうちょっと簡単に実装する方法はないもんかな… flash から html5 コード化するプラグインみたいな感じで変換できるやつとかさ。

イージング値を設定する為の記述は svg要素の基本的な使い方まとめ 12.アニメーション がとても参考になりました!

svgMemo_svgMemo_12

参考サイト

Share