Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

4,435 views

Published on

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

Published in: Technology
  • Be the first to comment

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 :)

×