Your SlideShare is downloading. ×
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
真面目なアニメーション (html5j 2013, Web Animations)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

真面目なアニメーション (html5j 2013, Web Animations)

5,269

Published on

Web Animationsという技術の紹介としてhtml5j 2013のプレゼンです。 …

Web Animationsという技術の紹介としてhtml5j 2013のプレゼンです。

アニメーションの重要さ、現在のウエブプラットホームの弱点、Web Animationsの機能とそのAPIの基本的な使い方、Animation Elementsというスペックなどの紹介です。

カンファレンスの配信は以下のURLでご覧になれます。
https://www.youtube.com/watch?v=Chdlf5PK7E0#t=435

HTML版はこちら: http://people.mozilla.org/~bbirtles/pres/html5j-2013/

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

No Downloads
Views
Total Views
5,269
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
41
Comments
0
Likes
33
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. アニメーションと言えば、だいたいこの ようなものを連想するでしょう。
  • 2. またはこの人… しかし、実はニャンコのGIF以外の使い方もあります。
  • 3. OSXのGenie効果では アニメーションによって最小化の 結果が分かりやすく伝えられて、 元に戻したいとき、どうすればいい かすぐ推測できます。
  • 4. Firefoxのインタフェースにもアニメーションが 同様に使われています。 読み込んだファイルを開くときどこにあるかはす ぐ分かります。
  • 5. だいたいどんな変化でも アニメーションによってより 分かりやすく伝えることができます。
  • 6. 長い物語もアニメーションによって 誰でも分かるように伝えられます。 基本的にアニメーションは時間を生 かして、情報を伝えることです。
  • 7. もし両方のクラスを同じ要素に適 用すれば…
  • 8. ひとつが勝ち。CSS Animation で足し算できないから。
  • 9. 前もって両方の効果が入っている アニメーションを作ってもタイミング が合わないし、全ての組み合わせを 用意しなければならない。
  • 10. このようにフォクすけの目をアニメートできない
  • 11. SVG Animationの機能に方が豊かだが…
  • 12. CSSのコンテンツの方が多い。
  • 13. そして多くのブラウザーでは CSS Animationの実装と SVG Animationの実装が全く別のもの
  • 14. その結果として、よく使われている CSS Animationの方がちゃんと 実装されています。
  • 15. (CSS プロパティーを変えるとき)
  • 16. Webには二つより一つのアニメー ション・モデルを作った方がよい じゃないかという声があって…
  • 17. 同時にWeb開発者が欠けている 機能を指摘してくれた。
  • 18. それでこうしました。
  • 19. すでにSVGにもCSS にもあった機能。
  • 20. CSSだけにあってWeb Animationsに入れたのは directionです。
  • 21. CSS Transitionの自動逆再生は Web Animationsのモデルに 入ってないけど他の機能ですぐ 実現できる。
  • 22. SVGからいくつかの機能を取り 込んだ。例えば、アニメーション を足し算する機能(加法的アニ メーション)、モーションパス、時 間制御など。
  • 23. SVGの中にもっとも複雑な機能を 入れなかったがモデルに入って いる機能ですぐ実現できる。
  • 24. 新しい機能よつ入れた。特に有力 なのはタイミンググループとカスタ ム効果。
  • 25. 根本的にWeb Animationsは抽象 的なアニメーションモデルです。
  • 26. どうやってCSS構文をWeb Animations のモデルによって実装するかとは別 のスペックで定義される。
  • 27. 同様にSVGの構文と仕組みは Animation Elementsというスペッ クで定義されている。
  • 28. もう一つの界面としてモデ ルにはAPIもある。
  • 29. 現在モデルもAPIも同じス ペックで定義されている。そ れは維持しやすいからだけ です。
  • 30. http://brian.sol1.net/svg/2013/07/25/players-wanted-the-pause-and-seek-game/ アニメーションなどの時 間制御、一時停止、巻 き戻しなどはプレーヤー という概念によって行う。
  • 31. タイミンググループには種類 二つある。名前はまた変わる かもしれないけど、とりあえず タイミンググループとタイミン グチェーンと呼ばれる。 タイミンググループの子 供は同時に動く。
  • 32. タイミングチェーンのこど もは順番に動く。
  • 33. 一緒に使える。
  • 34. 前のデモの構成
  • 35. dev.w3.org/fxtf/web-animations git.io/webanim ネイティブ実装現状
  • 36. SVG Animationの紹介として、これはものすごくSVG Animationエディターのアプリ。以下のURLでアクセスできる。 http://parapara-editor.mozlabs.jp/sandbox
  • 37. 完成したキャラクターが交通のキャンバスで表示される。 それもSVG Animationでできている。 詳しくは以下のURLをご覧ください。 http://parapara.mozlabs.jp
  • 38. キャラクターのSVGファイルの構成。
  • 39. しかし、Animation Elementsでもっと簡単に書ける。
  • 40. selectという属性によってアニメーション の定義を再利用できる。
  • 41. タイミングチェーンによって順序が 作りやすい。
  • 42. ドアが閉まるデモの構成。 要素構文はこんなような時間階層に適切。しかし、 <set>という要素によってCSSのクラスを適用すれば CSS Animationも同時に使える。
  • 43. タイミング情報を1か所またタイムシートと呼ばれる 別のファイルに集めるパターンが多い。
  • 44. git.io/webanim public-fx@w3.org birtles@mozilla-japan.org

×