|分類|CSS|SMIL|JavaScript|
|---|---|---|---|---|
|ストロークアニメーション(書き順)|〇|〇|〇|
|モーフィングアニメーション|×|〇|〇|
|単純なアニメーション(プロパティ変更)|〇|〇|〇|
|パスアニメーション|×|〇|〇|
CSSで動かす
メリット
- JavaScriptによるプログラミングがほとんど不要
- CSSプロパティ(塗りや線、拡縮・回転・移動等)であれば、手軽にアニメーションが実現できる
デメリット
- パスの変形やパスに沿った移動はできない(path要素のd属性にアクセスできないため)
- IE11で動作しない
まとめ
CSSプロパティの変更で対応できるシンプルなアニメーションで、IE 11に対応不要な場合に有効です。
CSSによるSVGアニメーションの記事書きました。
SMILで動かす
| アニメーションの種類 | 使うタグ |
|---|---|
| 属性値の変化 | animateタグ |
| CSSのTransforms系の変形(回転・移動・拡縮など) | animatetransformタグ |
| パスに沿った移動 | animatemotionタグ |
メリット
- HTMLコードだけでアニメーションが可能です。
- プロパティの変更以外にも、モーフィングやパスに沿ったアニメーションが実現できます。
デメリット
- IE 11とEdgeでは動作しません。
まとめ
スマホサイト用サイトでSVGアニメーションを実装する場合に有効です。
SMILによるSVGアニメーションの記事書きました。
JavaScriptで動かす
JavaScriptからDOMを操作することでアニメーションできます。
メリット
| メリット | 内容 |
|---|---|
| 表現力が高い | あらゆるアニメーションが可能(塗りと線の変化、拡縮・回転・移動、パスの変形、パスに沿ったアニメーション等) CSSプロパティやSMILで実現できたものは、すべて実現できる |
| 対象ブラウザが多い | IE 11、Microsoft Edgeを含む主要ブラウザーで動作する |
デメリット
- CSSやSMILに比べると、コードが煩雑になるので難易度が高くなります。
ライブラリ
ライブラリを使用することで、デメリットである実装の難易度を下げることができます。
JavaScriptによるSVGアニメーションの記事書きました。