Svgアニメーションを実装してみよう 20150207

3,830 views

Published on

SVGでアニメーションを実装する為に、必要な前提知識をまとめています。
SVGと親和性の高いJavaScriptからアニメーションを行う方法です。
また、二次元の図形を描画する際に選択肢となる、Canvasとの比較と、使い分けをまとめています。。

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,830
On SlideShare
0
From Embeds
0
Number of Embeds
2,196
Actions
Shares
0
Downloads
5
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Svgアニメーションを実装してみよう 20150207

  1. 1. SVGアニメーションを 実装してみよう! JavaScript祭スピンオフ!フロントエンド祭り in Co-Edo Let s begin SVG!
  2. 2. Self-Intoroduction 職 種:アプリケーションエンジニア(LAMP/Java/Oracle) 最近の願望:Rails開発 & スマホアプリ開発をしてみたい。 好きなもの:JavaScript
  3. 3. 一緒に勉強しましょう( ́ ▽ ` )ノ Self-Intoroduction • WordPressもくもく倶楽部@Co-Edo • Swiftビギナーズ倶楽部@Co-Edo http://swift-beginners.doorkeeper.jp/ http://wp-moku.doorkeeper.jp/ • Ruby on Rails ビギナーズ倶楽部@Co-Edo http://ror-beginners.doorkeeper.jp/ 勉強会やってます!
  4. 4. アクセスしてください:) https://join.me/820-569-747
  5. 5. Today's Agenda 1)SVGって何ですか? 2)SVGの使い方 3)SVGアニメーションを実装してみよう!
 4)SVG・Canvasどう使う? 5)便利なプラグイン紹介
  6. 6. 1)SVGって何ですか? ■正式名称は (スケーラブル ベクター グラフィックス) Scalable Vector Graphics 拡張可能なベクター画像 (IE8以前は外部ライブラリが必要)
  7. 7. 1)SVGって何ですか? 画像ファイル形式のひとつです。 SVGの他には、PNG、JPG、GIF等がある。 (́・ω・`) ショボーン なんだ・・・ 単なる画像ファイルか
  8. 8. 1)SVGって何ですか? 数値と式で計算して 表示する画像 (`・ω・́) シャキーン ただの画像じゃないよ! <svg> <circle cx="200" cy="120" r="100" fill="green" /> </svg>
  9. 9. 1)SVGって何ですか? 決定的に他のファイル形式とは違う特長がある! SVGは XMLでマークアップする。 ベクター形式(数値や式)で画像を扱う。 JPG PNG GIF…etc ビットマップ(ラスター)形式で画像を扱う。 拡大縮小をすると画像が荒れる。 拡大縮小などをしても画像が荒れない。
  10. 10. ベクターとビットマップって? ビットマップ(ラスタ)画像 (点が集まったデータ) ベクター画像 (数値と式のデータ)
  11. 11. SVGのいいところ <svg>要素に、テキストが書ける。 <text>要素として記述してグラフィックの 構成要素として扱うことができるので、 SEOに有効になる。 <svg width="1100" height="500"> <text x="50" y="500" font-size="500">SVG</text> </svg>
  12. 12. SVGのいいところ ロゴやアイコンをSVGで保持すると、 多様化するディスプレイのサイズや、 Retinaディスプレイのような ハイエンド機種にも対応が楽になる。
  13. 13. えっ!?でも、大変じゃない? 数値と式で ロゴやアイコンを 書くなんてムリ!!
  14. 14. 心配無料です! Illustratorで、SVG出力 超簡単!
  15. 15. 心配無料です! Illustratorで、SVG出力 ▪️SVGファイルを保存 「メインメニュー」>「ファイル」>「保存 / 別名で保存」>「SVG」を選択
  16. 16. ファイルを 見てみましょう
  17. 17. 心配無料です! 2)SVGの使い方 2-1)<img>タグを使う <img src="icon.svg" /> 2-2)<object>タグを使う <object type="image/svg+xml" data="icon.svg"></object> 2-4)インラインSVG HTML5から、インラインSVGがサポートされ、 HTML内にSVGを直接記述が可能。 2-3)CSSのBackgroundプロパティに指定 html { background-image: url(icon.svg); }
  18. 18. 3)SVGアニメーションを実装してみよう! DEMO
  19. 19. 4)SVG・Canvasどう使う? Canvasとは: • 動的な2次元ビットマップ画像を描画するHTML要素。 • Canvasは、HTML5から新しく追加された。 • アニメーション機能がない。 • JavaScripベースで動的に図を描くことができる。 • ビットマップ・グラフィックスなので拡大縮小すると画質の劣化が発生する。 • 主要ブラウザの最新版で実装されている(IE8以前は外部ライブラリが必要)
  20. 20. 4)SVG・Canvasどう使う?
  21. 21. 4)SVG・Canvasどう使う? SVG: 図形はDOM要素なので、マウスクリック等のイベントに対する実装が簡単。 なので、図形のパーツに連動した処理や、JavaScriptとの親和性が高い。 画像のサイズが大きいデータは、数値で描画できるので高速な傾向がある。 Canvas: ビットマップなので、ピクセル操作ができる。 SVGのような、図形に対するイベント処理は難しい。 SVGのようにDOMを構成しないので、オブジェクト数が多い描画が高速。
  22. 22. 5)便利なプラグイン紹介 Snap.svg(Adobeが公開したSVG用JavaScriptライブラリ) http://snapsvg.io/ svg.js(軽量JavaScriptライブラリ) http://www.svgjs.com/ SVG向けJSプラグイン ・CREATEJS(Adobeがスポンサー・ActionScriptライクに記述ができる。) http://www.createjs.com/#!/CreateJS ・jCanvas(jQueryライクに記述ができる。) http://calebevans.me/projects/jcanvas/ ・JapanMap(canvasで日本地図を表示してくれるjQueryプラグイン) http://takemaru-hirai.github.io/japan-map/ Canvas向けJSプラグイン
  23. 23. Thank you :)

×