【SMIL】SVGアニメーションでsvgのキャラ画像を動かそう!

公開日: / 更新日:

前記事「【Illustrator】ラスタ画像からsvg画像を作る方法」に続いてsvg関連。
今度はsvgアニメーションを実装してみました。

svgアニメーションには、

  1. aminate要素(SMIL(スマイル))を用いる
  2. javascriptを用いる
  3. css3のアニメーションを用いる

この3つの方法があるそうです。

(1)に比べ、(2)、(3)のほうが高度なアニメーションが実装できるそうですが、今回は「わざわざjsやcssでアニメーションさせるほどじゃないけどちょっと動かしたいよね」という時に使える、SMILを用いたプチアニメをまとめました!

今回つくってみたもの

 

  • 目をぱちぱち(aminate要素 path変化)
  • ぴょんぴょんとジャンプ(animateTransform要素 並進(translate))
  • 耳をぱたぱた(animateTransform要素 回転(rotate))
  • (おまけ) ごろごろ回転移動(animateTransform要素 並進(translate), 回転(rotate))

下準備

全体に共通する方法として、まずアニメーションさせたいsvg画像を用意します。
*ラスタ画像をsvg画像化する方法については前記事で紹介しています。

次にsvg画像をブラウザ上で表示し、開発者ツールで動かしたい要素を特定します。

エディタでsvgのコードを開き、先ほど特定した動かしたい要素のタグを修正。

このタグの中にSMIL言語のアニメーションを実装する要素を記載していきます。
今回はanimate要素もしくはanimateTransform要素を使います。

SMIL…
W3CがXMLをもとに規格化したマークアップ言語。SMILを利用することで、動画や音声、テキストなどの異なる形式のデータを、Webブラウザー上で同期をとって再生できる。animate要素やanimateTransform要素はこの言語の技術。
引用元)SMIL(すまいる)とは – コトバンク
animate要素…
animate 要素は1個の属性/プロパティに対する時経過に伴うアニメーションに用いられる。
引用元)アニメーション – SVG 1.1 (第2版)
animateTransform要素…
animateTransform 要素は対象要素の変換属性に対するアニメーションを行い、それによる並進, 拡縮, 回転, 斜傾などを制御するアニメーションを可能にする。
引用元)アニメーション – SVG 1.1 (第2版)

目をぱちぱち

こちらの記事をがっつり参考にさせていただきました。
変化前と変化後のパスを用意し、ぬるっとアニメーションさせる方法です。

  1. svg画像aと、目だけ細く変更したsvg画像bを用意
    *このときアンカーの数を変えないように、とのこと。
  2. 画像bをブラウザで開き、どちらかの目の部分の要素を特定。Dから始まる文字列を控える
  3. 画像aをブラウザで開き、同じほうの目の部分の要素を特定。以下の形のコードに書き直す

完成!
目をぱちぱちする間隔は秒数とvalueの数で無理やり調整してみました。

See the Pen NyNdzb by BICOxxx (@BICOxxx) on CodePen.

ぴょんぴょんとジャンプ

今度はanimateTransform要素で並進させてジャンプのように見せます。
先ほどの瞬きと同じように秒数とvalueの数でそれっぽい動きにしてます。

1.画像をブラウザで開き、体全体のpathを特定。もしグルーピングするgタグがなければgで囲う。

2.このgタグの中に以下の形のコードを書き足す

完成!

See the Pen pig jumping by BICOxxx (@BICOxxx) on CodePen.

耳をぱたぱた

次はanimateTransform要素の回転を使います。
耳のpathに対してアニメーションをかけていきます。

    • 画像をブラウザで開き、耳のpathを特定。以下のコードに書き直す。

完成!

See the Pen pig ear by BICOxxx (@BICOxxx) on CodePen.

ごろごろ回転移動

おまけ。animateTransform要素の並進と回転を合わせるとこんなこともできます。

See the Pen pig rolling by BICOxxx (@BICOxxx) on CodePen.

気になったところ

一定間隔を指定する方法

目の瞬きやジャンプを実装するときに調べましたが、「一定の時間をおいてアニメーションを実行」という命令はできなさそうです。

アナログで書くならこんな感じに。

これだと、durに指定した5秒間で、valueに指定したパスが等間隔で表示されるので近い挙動になります。
こういう細かい動きはcssやjsでの領域になるのかもしれませんね。

ease等の滑らかな動きの再現方法

こちらは名称を使った設定こそできませんが、cssでのeaseといった名称がついている設定値をkeySplines属性に使うことで再現可能だそうです。
詳細がこちらに記載されてました。

ease 0.25 0.1 0.25 1.0
linear 0.0 0.0 1.0 1.0
ease-in 0.42 0 1.0 1.0
ease-out 0.0 0.0 0.58 1.0
ease-in-out 0.42 0.0 0.58 1.0

引用元:svg要素の基本的な使い方まとめ > keySplines属性に設定する値について

まとめ

SMILはささやかなアニメーションであれば数行のコードで実装できるので、cssとjsとは違った用途に使えそうですね。
こちらの記事のような、がっつりとした変形アニメーションも面白そうです。

しかしこの記事を起こしてから知ったのですが、SMILは一度chromeで非推奨の動きがあったそうです。

chrome(blink)におけるSMILの非推奨警告の経緯

2015/7 chromeから非推奨の警告 公式記事

      • Chrome 45 Beta版からSMILは非推奨、将来的には機能自体非対応になると発表
      • SMILが設定されたSVGがページに表示されている場合、開発者ツールのコンソールに警告文を表示

2016/8 chromeから非推奨措置の保留

      • 反対意見が多かったこと、まだcssのアニメーションではSMILの代替として十分でないとの理由で方針の保留を発表

参考)#35:SVGアイコン管理ツール、SMILの今後についてなど

2018/1現在、特に新しい発表はないようです。
こういうことがあったため、chromeで現在SMILが使えない訳ではありませんが、SMILの将来性が不安視されるため、cssやjsを主に使おうという意見が多いようです。
(*なおIE11・EdgeはそもそもSMIL非対応)

IE, MS Edgeでは依然としてSMILは非対応ですし(参考:Can I use)、もしも今後の仕様追加でCSS/Web Animationsで十分に代替できるようになれば再びSMILの見直しがされる可能性があります。

そういった点を鑑みて、可能であればアニメーションを設定する際にはSMILではなくJavaScript, CSS/Web Animationsで制作するのをお勧めします。
#35:SVGアイコン管理ツール、SMILの今後についてなど

SVG要素の一つであるanimateタグを使う。
SMIL(Synchronized Multimedia Integration Language)というらしい。
今後ブラウザがサポートしていくかどうか決定していないので非推奨。
SVGのアニメーション手段とその選び方

今回のSMILアニメーションは知識として頭にいれておき、
今後SVGアニメーションを実装する際はSMILではなくcss、js中心で組んでいこうと思います。

参考サイト

  • このエントリーをはてなブックマークに追加