Suche senden
Hochladen
Raphael.jsを使ってSVGをモーフィングさせてみた失敗の記録
•
3 gefällt mir
•
5,213 views
G
girigiribauer
Folgen
大なごやJS vol.4 (#daiNagoyaJS) で発表した内容です。 iPad miniほしいです。
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 36
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
LT Leap MotionとJavaScriptで遊ぼう!
LT Leap MotionとJavaScriptで遊ぼう!
Toshio Ehara
まぼろしのむいかめ in #upcamp 2013 Toyko
まぼろしのむいかめ in #upcamp 2013 Toyko
sters
まだやれる Css preprocesser
まだやれる Css preprocesser
Shinya Sugo
Webエンジニアのためのプロジェクションマッピング(とりあえず完結編)
Webエンジニアのためのプロジェクションマッピング(とりあえず完結編)
KatsuyaENDOH
MySQLの系譜について少々
MySQLの系譜について少々
yoku0825
HTML5-20100626
HTML5-20100626
Taku AMANO
Svgアニメーションを実装してみよう 20150207
Svgアニメーションを実装してみよう 20150207
Kanako Kobayashi
これからはじめるひとのためのdev.mysql.com
これからはじめるひとのためのdev.mysql.com
yoku0825
Weitere ähnliche Inhalte
Was ist angesagt?
gulp芸
gulp芸
Yuki Ishikawa
2012/11/03Hiroshima.rb
2012/11/03Hiroshima.rb
Ueki Kouji
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
Yuki Kuramochi
使う前に知っておきたいSVGのこと
使う前に知っておきたいSVGのこと
Kasumi Morita
20160727 jaws ug-kobe_short_speak_alexa
20160727 jaws ug-kobe_short_speak_alexa
Daiki Mori
JavascriptでRubyの作り方
JavascriptでRubyの作り方
Shuyo Nakatani
React+fluxを導入した話
React+fluxを導入した話
Yuki Ishikawa
Juzu Frameworkを使ってみた @第四回 渋谷java
Juzu Frameworkを使ってみた @第四回 渋谷java
Kazuhiro Serizawa
Ember コミュニティとわたし
Ember コミュニティとわたし
Ryunosuke SATO
NGK2014 ヤマオススメ
NGK2014 ヤマオススメ
Ryo RKTM
ヤマオススメ@NGK2014
ヤマオススメ@NGK2014
Ryo RKTM
Raytracing4
Raytracing4
Kazuma Hatta
THETA S でライブストリーミング(途中経過)
THETA S でライブストリーミング(途中経過)
KatsuyaENDOH
Kyakusaki.rb
Kyakusaki.rb
Yasuyuki Fujikawa
JRubyで作るapiサーバー
JRubyで作るapiサーバー
Yamamoto Kazuhisa
HTML5でサイネージは作れる!!
HTML5でサイネージは作れる!!
Kazuya Hiruma
AWSが誰でも使える理由
AWSが誰でも使える理由
Nobuhiko Futagami
JQuery入門
JQuery入門
sayoko miura
Was ist angesagt?
(19)
gulp芸
gulp芸
2012/11/03Hiroshima.rb
2012/11/03Hiroshima.rb
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
使う前に知っておきたいSVGのこと
使う前に知っておきたいSVGのこと
20160727 jaws ug-kobe_short_speak_alexa
20160727 jaws ug-kobe_short_speak_alexa
JavascriptでRubyの作り方
JavascriptでRubyの作り方
React+fluxを導入した話
React+fluxを導入した話
Juzu Frameworkを使ってみた @第四回 渋谷java
Juzu Frameworkを使ってみた @第四回 渋谷java
Ember コミュニティとわたし
Ember コミュニティとわたし
NGK2014 ヤマオススメ
NGK2014 ヤマオススメ
ヤマオススメ@NGK2014
ヤマオススメ@NGK2014
Raytracing4
Raytracing4
THETA S でライブストリーミング(途中経過)
THETA S でライブストリーミング(途中経過)
Kyakusaki.rb
Kyakusaki.rb
JRubyで作るapiサーバー
JRubyで作るapiサーバー
HTML5でサイネージは作れる!!
HTML5でサイネージは作れる!!
AWSが誰でも使える理由
AWSが誰でも使える理由
JQuery入門
JQuery入門
Ähnlich wie Raphael.jsを使ってSVGをモーフィングさせてみた失敗の記録
Three.js使ってみた
Three.js使ってみた
晴哉 谷口
I want Make full svg website
I want Make full svg website
Hidetsugu Takahashi
SVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーション
Kohei Kadowaki
20150207 何故scalaを選んだのか
20150207 何故scalaを選んだのか
Katsunori Kanda
Firefox OSでSVGをつかってみた
Firefox OSでSVGをつかってみた
Kohei Kadowaki
WebGLとvideoを組み合わせるおもしろい
WebGLとvideoを組み合わせるおもしろい
Hiroyuki Anai
はじめてのWallaby.js
はじめてのWallaby.js
Shunta Saito
JavaScriptで味わう! 関数型プログラミングのメリット!!
JavaScriptで味わう! 関数型プログラミングのメリット!!
Keigo Magami
Rubyで始めるWebスクレイピング
Rubyで始めるWebスクレイピング
Takuro Sasaki
ShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみ
Kohei Kadowaki
libpgenでパケット操作
libpgenでパケット操作
slankdev
A look back on my Rails porftolio
A look back on my Rails porftolio
ssuser9a4523
Ähnlich wie Raphael.jsを使ってSVGをモーフィングさせてみた失敗の記録
(12)
Three.js使ってみた
Three.js使ってみた
I want Make full svg website
I want Make full svg website
SVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーション
20150207 何故scalaを選んだのか
20150207 何故scalaを選んだのか
Firefox OSでSVGをつかってみた
Firefox OSでSVGをつかってみた
WebGLとvideoを組み合わせるおもしろい
WebGLとvideoを組み合わせるおもしろい
はじめてのWallaby.js
はじめてのWallaby.js
JavaScriptで味わう! 関数型プログラミングのメリット!!
JavaScriptで味わう! 関数型プログラミングのメリット!!
Rubyで始めるWebスクレイピング
Rubyで始めるWebスクレイピング
ShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみ
libpgenでパケット操作
libpgenでパケット操作
A look back on my Rails porftolio
A look back on my Rails porftolio
Mehr von girigiribauer
黒い画面超入門 - tmux を使ってみよう
黒い画面超入門 - tmux を使ってみよう
girigiribauer
JSHint を自分好みにする話
JSHint を自分好みにする話
girigiribauer
CSS の Flexible Box Layout がヤバい
CSS の Flexible Box Layout がヤバい
girigiribauer
フロントエンドのツール Yeoman を勘違いしていた
フロントエンドのツール Yeoman を勘違いしていた
girigiribauer
Webアプリのマークアップ、どうすればいいの?
Webアプリのマークアップ、どうすればいいの?
girigiribauer
WebRTC + Web Audio API = スーパーサイヤ人
WebRTC + Web Audio API = スーパーサイヤ人
girigiribauer
WebRTCでドラゴンボールごっこ
WebRTCでドラゴンボールごっこ
girigiribauer
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまで
girigiribauer
Mehr von girigiribauer
(9)
黒い画面超入門 - tmux を使ってみよう
黒い画面超入門 - tmux を使ってみよう
JSHint を自分好みにする話
JSHint を自分好みにする話
CSS の Flexible Box Layout がヤバい
CSS の Flexible Box Layout がヤバい
フロントエンドのツール Yeoman を勘違いしていた
フロントエンドのツール Yeoman を勘違いしていた
Webアプリのマークアップ、どうすればいいの?
Webアプリのマークアップ、どうすればいいの?
WebRTC + Web Audio API = スーパーサイヤ人
WebRTC + Web Audio API = スーパーサイヤ人
WebRTCでドラゴンボールごっこ
WebRTCでドラゴンボールごっこ
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまで
Kürzlich hochgeladen
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
arts yokohama
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
arts yokohama
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
ssuser370dd7
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
ssuser539845
2024 04 minnanoito
2024 04 minnanoito
arts yokohama
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
Tetsuya Nihonmatsu
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
Industrial Technology Research Institute (ITRI)(工業技術研究院, 工研院)
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
Ayachika Kitazaki
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
Shumpei Kishi
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
Matsushita Laboratory
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
Sadao Tokuyama
2024 03 CTEA
2024 03 CTEA
arts yokohama
Kürzlich hochgeladen
(12)
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
2024 04 minnanoito
2024 04 minnanoito
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
2024 03 CTEA
2024 03 CTEA
Raphael.jsを使ってSVGをモーフィングさせてみた失敗の記録
1.
Raphael.jsを使って SVGをモーフィングさせてみた
失敗の記録 2012/11/03 #daiNagoyaJS @girigiribauer
2.
SVGのグラフィックライブラリを
使ってみたかった
3.
SVGのグラフィックライブラリを
使ってみたかった • SVGでモーフィングさせるの どんな感じか試してみたい • SVGは結局XML形式なので、 ライブラリ使わなくても問題ないはず • SVGに慣れてないので とりあえず導入として使ってみる
4.
ちょうどよさげなコンテストが
やってた • HTML5実技コンテストってのが あるらしい • iPad miniとか買いたくないので欲しい
6.
なので、作ってみた • SVGのグラフィックライブラリを 使いつつ、なんか面白いコンテンツ •
bonsaiJSってのがあるらしい
8.
最初にbonsaiJSを使ってみた •
bonsaiJS http://bonsaijs.org/ • documentにもmorphToとかあったので... http://docs.bonsaijs.org/module-path.Path.html#morphTo • (結論からいうとRaphael.jsに切り替えた)
9.
作り方 • 1. 公開されてたpngファイルを
SVGファイルに変換 • 2. SVGファイルのpathタグのd属性 (パスデータ)を拾ってくる • 3. bonsaiJSで動かしてみる
10.
1.pngファイルを SVGファイルに変換 •
Illustratorは偉大 • ライブトレースという機能がある
14.
2.パスデータ拾ってくる • SVGで実用的に使うのはpathタグ • pathタグだけ知ってればいいのかも •
入門記事によくcircleタグとかrectタグ とかあるけど、実際どこで使うのか
15.
2.パスデータ拾ってくる • d属性はmoveTo, lineTo,
curveToなどを 省略記法で書ける • ここ見るとよくわかる http://www.w3.org/TR/SVG/paths.html#PathElement
16.
順調だー
17.
3.bonsaiJSで動かしてみる • 動かしてみた
23.
これはひどい
24.
なにがダメだったのか • 単に中間を生成するだけなら簡単 • そもそもモーフィングに向いているコン
テンツなのか? • どのパーツがどこに対応しているのか が複雑すぎる
25.
前振りまとめ • 単にモーフィングさせるだけなら簡単 • 意図したモーフィングは意外と難しい •
ライブラリ使ったからといって、 勝手に空気読んで やってくれるわけじゃない
26.
ここから実践編
27.
意図したものを作る
大まかな手順 • 1. モーフィングさせるのに適切なコンテ ンツかどうか判断 • 2. パーツ単位での対応付けを検討 • 3. 点同士の対応付けを検討
28.
1. モーフィングさせるのに適切な
コンテンツかどうか判断 • 今回は変化前後とも手になるので、 たぶん適切 • 勝手に6本指になったり耳が生えたりは しない
29.
2.パーツ単位での対応付けを検討 • 握りこぶしと指とを分ける • 親指、人差し指、中指、薬指、小指
それぞれ分ける • 計6つのパーツで構成されているはず
31.
3. 点同士の対応付けを検討 • パスの形状を全部合わせた方が良い
→結局Illustrator上で変化させて作る • 影で隠れるところも含めて考える →指の付け根はオープンパス
32.
唐突にRaphael.js •
きちんと設計していれば、 逆にライブラリは何でもいい • BonsaiJSはWebWorkersをサポートしていて、別 プロセス(スレッド?)でSVGをレンダリング しつつ、sendMessageなどを使って通信する仕組 みが備わってる • 今回はそこまでがっつりやらないので、このタ イミングでRaphael.jsに切り替えた(妥協)
34.
(SVGや)Illustratorとの格闘の日々 •
無駄にIllustratorが使えるようになった
35.
実際出来たもの • http://jsdo.it/pypupypa/slowMotionJanken
36.
まとめ • ライブラリをポンと入れたら何でも解 決するわけじゃない •
当たり前だけど設計大事、 意図したモーフィングは難しい • “間”の表現は面白いよ
Hinweis der Redaktion
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Jetzt herunterladen