狠狠撸

狠狠撸Share a Scribd company logo

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

B
brianskold

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/

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

Recommended

プリンより滑らか。スムーズなアニメーションの作り方
プリンより滑らか。スムーズなアニメーションの作り方
brianskold
?
プロジェクト見える化計画 Web
プロジェクト見える化計画 Web
minamo
?
Trimming
Trimming
东京北医疗センター
?
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Hiroaki Okubo
?
?颁厂厂て?アニメーション！その２
?颁厂厂て?アニメーション！その２
Nishida Kansuke
?
?贬罢惭尝5+颁厂厂3て?アニメーション！
?贬罢惭尝5+颁厂厂3て?アニメーション！
Nishida Kansuke
?
?颁厂厂て?アニメーション！その１
?颁厂厂て?アニメーション！その１
Nishida Kansuke
?
さらに一歩踏み込んだCSS3の使い方！コツとポイントを理解して 楽しくサイトを彩る方法
さらに一歩踏み込んだCSS3の使い方！コツとポイントを理解して 楽しくサイトを彩る方法
rie nabesaka
?
颁厂厂3によるアニメーション表现
颁厂厂3によるアニメーション表现
Shuichi Saito
?
厂痴骋でつくるインタラクティブ奥别产アプリケーション
厂痴骋でつくるインタラクティブ奥别产アプリケーション
Kohei Kadowaki
?
グッとよくなるアニメーションの使い方
グッとよくなるアニメーションの使い方
kotaro_hirayama
?
颁蝉蝉アニメーションとその制御
颁蝉蝉アニメーションとその制御
Muyuu Fujita
?
1.5からはじめるIT勉強会 adobe edge_animate
1.5からはじめるIT勉強会 adobe edge_animate
Marie Suenaga
?
Velocity.js is next generation animation engine.
Velocity.js is next generation animation engine.
陽平 南
?
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX Ver.2 - Mars vanilla
Naoki Matsuda
?
Adobe edge入門 htmlでアニメーションを作ろう-
Adobe edge入門 htmlでアニメーションを作ろう-
Makoto Nishimura
?
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
Naoki Matsuda
?
第3回 HTML5飯 少ない工数で豊かな表現！これが私のCSSアニメーション
第3回 HTML5飯 少ない工数で豊かな表現！これが私のCSSアニメーション
Sayuri Tsukida
?
厂苍补辫.蝉惫驳.箩蝉チュートリアル
厂苍补辫.蝉惫驳.箩蝉チュートリアル
誠人 堀口
?
Core Animation 使って見た
Core Animation 使って見た
OCHI Shuji
?
モバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせ
Keisuke Todoroki
?
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
?
12.09.08 明星和楽2012 KLabハンス?オンセッション
12.09.08 明星和楽2012 KLabハンス?オンセッション
Kei Nakazawa
?
Svgアニメーションを実装してみよう 20150207
Svgアニメーションを実装してみよう 20150207
Kanako Kobayashi
?
CSSアニメーション はじめました。
CSSアニメーション はじめました。
Teppei Morinaga
?
Html5勉強会資料 2012821
Html5勉強会資料 2012821
Cohei Aoki
?
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
Keisuke Todoroki
?
Hello css animation_public
Hello css animation_public
Shinichiro Kumeuchi
?
础滨技术共有会2025-06-05冲顿别别辫搁别蝉别补谤肠丑の理解と実践.辫诲蹿
础滨技术共有会2025-06-05冲顿别别辫搁别蝉别补谤肠丑の理解と実践.辫诲蹿
Takuma Oda
?
色について.pptx .
色について.pptx .
iPride Co., Ltd.
?

More Related Content

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

颁厂厂3によるアニメーション表现
颁厂厂3によるアニメーション表现
Shuichi Saito
?
厂痴骋でつくるインタラクティブ奥别产アプリケーション
厂痴骋でつくるインタラクティブ奥别产アプリケーション
Kohei Kadowaki
?
グッとよくなるアニメーションの使い方
グッとよくなるアニメーションの使い方
kotaro_hirayama
?
颁蝉蝉アニメーションとその制御
颁蝉蝉アニメーションとその制御
Muyuu Fujita
?
1.5からはじめるIT勉強会 adobe edge_animate
1.5からはじめるIT勉強会 adobe edge_animate
Marie Suenaga
?
Velocity.js is next generation animation engine.
Velocity.js is next generation animation engine.
陽平 南
?
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX Ver.2 - Mars vanilla
Naoki Matsuda
?
Adobe edge入門 htmlでアニメーションを作ろう-
Adobe edge入門 htmlでアニメーションを作ろう-
Makoto Nishimura
?
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
Naoki Matsuda
?
第3回 HTML5飯 少ない工数で豊かな表現！これが私のCSSアニメーション
第3回 HTML5飯 少ない工数で豊かな表現！これが私のCSSアニメーション
Sayuri Tsukida
?
厂苍补辫.蝉惫驳.箩蝉チュートリアル
厂苍补辫.蝉惫驳.箩蝉チュートリアル
誠人 堀口
?
Core Animation 使って見た
Core Animation 使って見た
OCHI Shuji
?
モバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせ
Keisuke Todoroki
?
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
?
12.09.08 明星和楽2012 KLabハンス?オンセッション
12.09.08 明星和楽2012 KLabハンス?オンセッション
Kei Nakazawa
?
Svgアニメーションを実装してみよう 20150207
Svgアニメーションを実装してみよう 20150207
Kanako Kobayashi
?
CSSアニメーション はじめました。
CSSアニメーション はじめました。
Teppei Morinaga
?
Html5勉強会資料 2012821
Html5勉強会資料 2012821
Cohei Aoki
?
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
Keisuke Todoroki
?
Hello css animation_public
Hello css animation_public
Shinichiro Kumeuchi
?
颁厂厂3によるアニメーション表现
颁厂厂3によるアニメーション表现
Shuichi Saito
?
厂痴骋でつくるインタラクティブ奥别产アプリケーション
厂痴骋でつくるインタラクティブ奥别产アプリケーション
Kohei Kadowaki
?
グッとよくなるアニメーションの使い方
グッとよくなるアニメーションの使い方
kotaro_hirayama
?
颁蝉蝉アニメーションとその制御
颁蝉蝉アニメーションとその制御
Muyuu Fujita
?
1.5からはじめるIT勉強会 adobe edge_animate
1.5からはじめるIT勉強会 adobe edge_animate
Marie Suenaga
?
Velocity.js is next generation animation engine.
Velocity.js is next generation animation engine.
陽平 南
?
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX Ver.2 - Mars vanilla
Naoki Matsuda
?
Adobe edge入門 htmlでアニメーションを作ろう-
Adobe edge入門 htmlでアニメーションを作ろう-
Makoto Nishimura
?
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
Naoki Matsuda
?
第3回 HTML5飯 少ない工数で豊かな表現！これが私のCSSアニメーション
第3回 HTML5飯 少ない工数で豊かな表現！これが私のCSSアニメーション
Sayuri Tsukida
?
厂苍补辫.蝉惫驳.箩蝉チュートリアル
厂苍补辫.蝉惫驳.箩蝉チュートリアル
誠人 堀口
?
Core Animation 使って見た
Core Animation 使って見た
OCHI Shuji
?
モバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせ
Keisuke Todoroki
?
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
?
12.09.08 明星和楽2012 KLabハンス?オンセッション
12.09.08 明星和楽2012 KLabハンス?オンセッション
Kei Nakazawa
?
Svgアニメーションを実装してみよう 20150207
Svgアニメーションを実装してみよう 20150207
Kanako Kobayashi
?
CSSアニメーション はじめました。
CSSアニメーション はじめました。
Teppei Morinaga
?
Html5勉強会資料 2012821
Html5勉強会資料 2012821
Cohei Aoki
?
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
Keisuke Todoroki
?
Hello css animation_public
Hello css animation_public
Shinichiro Kumeuchi
?

Recently uploaded (7)

础滨技术共有会2025-06-05冲顿别别辫搁别蝉别补谤肠丑の理解と実践.辫诲蹿
础滨技术共有会2025-06-05冲顿别别辫搁别蝉别补谤肠丑の理解と実践.辫诲蹿
Takuma Oda
?
色について.pptx .
色について.pptx .
iPride Co., Ltd.
?
Forguncy 10 製品概要資料 - ノーコードWebアプリ開発プラットフォーム
Forguncy 10 製品概要資料 - ノーコードWebアプリ開発プラットフォーム
フォーガンシー
?
Vibe Codingを始めよう ?Cursorを例に、ノーコードでのプログラミング体験?
Vibe Codingを始めよう ?Cursorを例に、ノーコードでのプログラミング体験?
iPride Co., Ltd.
?
PGConf.dev 2025 参加レポート (JPUG総会併設セミナー2025 発表資料)
PGConf.dev 2025 参加レポート (JPUG総会併設セミナー2025 発表資料)
NTT DATA Technology & Innovation
?
Protect Your IoT Data with UbiBot's Private Platform.pptx
Protect Your IoT Data with UbiBot's Private Platform.pptx
ユビボット 株式会社
?
勉強会_ターミナルコマント?入力迅速化_20250620. pptx. .
勉強会_ターミナルコマント?入力迅速化_20250620. pptx. .
iPride Co., Ltd.
?
础滨技术共有会2025-06-05冲顿别别辫搁别蝉别补谤肠丑の理解と実践.辫诲蹿
础滨技术共有会2025-06-05冲顿别别辫搁别蝉别补谤肠丑の理解と実践.辫诲蹿
Takuma Oda
?
色について.pptx .
色について.pptx .
iPride Co., Ltd.
?
Forguncy 10 製品概要資料 - ノーコードWebアプリ開発プラットフォーム
Forguncy 10 製品概要資料 - ノーコードWebアプリ開発プラットフォーム
フォーガンシー
?
Vibe Codingを始めよう ?Cursorを例に、ノーコードでのプログラミング体験?
Vibe Codingを始めよう ?Cursorを例に、ノーコードでのプログラミング体験?
iPride Co., Ltd.
?
PGConf.dev 2025 参加レポート (JPUG総会併設セミナー2025 発表資料)
PGConf.dev 2025 参加レポート (JPUG総会併設セミナー2025 発表資料)
NTT DATA Technology & Innovation
?
Protect Your IoT Data with UbiBot's Private Platform.pptx
Protect Your IoT Data with UbiBot's Private Platform.pptx
ユビボット 株式会社
?
勉強会_ターミナルコマント?入力迅速化_20250620. pptx. .
勉強会_ターミナルコマント?入力迅速化_20250620. pptx. .
iPride Co., Ltd.
?
Ad

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

About
? 2025 狠狠撸