SVG animation

Transcript

1. SVG animation
2. Scalable Vector Graphics SVGは2次元グラフィックスをXMLで記述するための言語 詳しくは↓ W3Cの仕様（SVG1.1） https://triple-underscore.github.io/SVG11/ Living Standardの仕様 https://momdo.github.io/html/embedded-content-other.html#svg-0
3. SVG animation 1. CSS 2. JavaScript 3. SMIL
4. 1. CSS 特徴 - 書くのは簡単 - 制御がほとんどできない - JavaScriptと組み合わせればいい感じ
5. 2. JavaScript 特徴 - だいたいのことができる - 書くのがめんどくさい - ライブラリが豊富
6. 2. JavaScript ライブラリが豊富 - Snap SVG http://snapsvg.io/ モーフィングなどアニメーションが作りやすい
7. 2. JavaScript ライブラリが豊富 - Zdog https://zzz.dog/ 3D表現ができる
8. 3. SMIL 特徴 - プロパティで設定できる - イベント制御もできる
9. 3. SMIL Synchronized Multimedia Integration Language WWW上でマルチメディアコンテンツを表現するためのマークアップ言語の一つである。 静止画、動画、音声、文字（テキスト）などの、位置レイアウト、時間軸上でのレイアウト を、Extensible Markup Language (XML) フォーマットで記述することで統合し、再生させる ことができる。 （引用元）wikipedia - SMIL https://ja.wikipedia.org/wiki/Synchronized_Multimedia_Integration_Language
10. 3. SMIL 動作環境 - IE・MS Edgeでは動かない - blinkは非推奨を保留という状態 → 動作環境が不安定なので使用されない
11. なぜ、この話をしたか - Microsoft Edgeが「Chromium」ベースとなることで SMILが利用可能になる - SVG animation2の草案を更新しているのでもっと機 能が充実されるはず → きっとSMILの時代が来る・・・かも