Your SlideShare is downloading. ×
真面目なアニメーション (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,240

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,240
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

×