Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS Animations vs WAAPI
Search
KeitaroOkamura
September 14, 2018
Programming
0
440
CSS Animations vs WAAPI
KeitaroOkamura
September 14, 2018
Tweet
Share
More Decks by KeitaroOkamura
See All by KeitaroOkamura
Suspenseのユースケースを探る
keitarookamura
1
230
ヤギでもわかるソフトウェアテスト
keitarookamura
0
110
ヤギでもわかるオブジェクト指向UIデザイン
keitarookamura
3
250
ヤギでもわかるGit入門
keitarookamura
1
220
ユースケースから考えるユーザビリティ
keitarookamura
1
150
サクッと簡単!お手軽 Scaffold
keitarookamura
1
240
自社サイトをPWA化した話
keitarookamura
0
87
マイクロインタラクションから考えるアニメーション
keitarookamura
1
230
Vue.js+AtomicDesign
keitarookamura
2
2.5k
Other Decks in Programming
See All in Programming
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
360
VS Code をプロダクトにどう取り込むか
onomax
1
340
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
見た目から始める生産性向上
ikumatadokoro
7
760
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
340
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
新宿ダンジョンを可視化してみた
satoshi7190
2
210
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
220
Goのエラースタックトレースの歴史と今後
sonatard
6
590
ONE WEDGE_company_guide
1wedge_one
0
440
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
The Power of CSS Pseudo Elements
geoffreycrofte
59
5k
A better future with KSS
kneath
231
16k
The Invisible Side of Design
smashingmag
294
49k
Why Our Code Smells
bkeepers
PRO
331
56k
How GitHub (no longer) Works
holman
304
140k
The Brand Is Dead. Long Live the Brand.
mthomps
48
28k
Being A Developer After 40
akosma
56
580k
Gamification - CAS2011
davidbonilla
76
4.6k
Code Reviewing Like a Champion
maltzj
513
39k
Typedesign – Prime Four
hannesfritz
36
2.1k
Transcript
CSS Animations vs WAAPI FukuokaJS #6 / 2018.09.13
PROFILE Keitaro Okamura karabiner.inc Frontend Engineer フロントエンドエンジニア0年生 @karaagekeitaroo
Web Animations API is 何? 新しい Web Animation Framework となる
JavaScriptのAPI 簡単に言うと、CSS Animation の keyframe 制御を JS から可能にしたようなもの ( W A A P I )
・ CSS animation、CSS transition ・ HTML5 Canvas ・ SVG animation
・ JS の DOM 操作で実装する animation … etc. Web Animation Patterns
・ CSS animation、CSS transition ・ HTML5 Canvas ・ SVG animation
・ JS の DOM 操作で実装する animation … etc. Web Animation Patterns WAAPI
1. Let’s create Animation! element.animate(keyframes, options); WAAPI を使用してアニメーションを作成するには、keyframes と options
の 2 つの引数をとる Element.animate() 関数を使用します。
1. Let’s create Animation! element.animate(keyframes, options); WAAPI を使用してアニメーションを作成するには、keyframes と options
の 2 つの引数をとる Element.animate() 関数を使用します。 Sample
2. keyframes → CSS Animations の場合 @keyframes zoom { 0%
{transform: none;} 50% {transform: scale(1.5);} 100% {transform: none;} } 0%, 100% にtransform: none;、 50% にtransform: scale(1.5);を設定しており、 それを直線的に動かしています。
2. keyframes → WAAPI の場合 const zoom = { transform:
['none', 'scale(1.5)', 'none'] } 1. 単一の keyframes Object を渡す 各キーは、CSS プロパティを表し、配列内の各値は、アニメー ションタイムライン上のポイントを表します。
2. keyframes → WAAPI の場合 const zoom = [ {
transform: 'none' }, { transform: 'scale(1.5)', offset: 0.5 }, { transform: 'none' } ] 2. 配列として書き出す 配列内の各アイテムは、タイムライン上のポイントを表し、その ポイントに適用される各 CSS プロパティと値を指定します。
3. options → WAAPI の場合 const zoomOptions = { duration:
2000, easing: 'linear', delay: 150, iterations: Infinity } animate() 関数に渡す2番目の引数は、 いくつかのオプションを持つ Object です。
3. options → CSS Animations の場合 .selector { animation-name: zoom;
animation-duration: 2s; animation-timing-function: linear; animation-delay: 0.15s; animation-iteration-count: infinite; } 上記のように animation プロパティを指定します。 animation: zoom 2s linear 0.15s infinite; 一括で指定する場合
3. options → CSS Animations の場合 No property Description 1
animation-name アニメーション名 2 animation-duration 実行時間 3 animation-timing-function 進行の度合い 4 animation-delay 開始時間 5 animation-iteration-count 繰り返し回数 6 animation-direction 再生方向 7 animation-fill-mode 再生前後の状態 8 animation-play-state 再生・停止
3. options → WAAPI の場合 No property Description 1 id
ユニークID 2 duration 実行時間 3 easing 進行の度合い 4 delay 開始時間 5 iteration 繰り返し回数 6 direction 再生方向 7 fill 再生前後の状態 8 endDelay 終了後に遅延する時間 9 iterationStart 開始する繰り返しポイント
4. controll const animation = element.animate(keyframes, options); animation.play(); // 再生
animation.pause(); // 一時停止 animation.reverse(); // 逆再生 animation.cancel(); // キャンセル animation.finish(); // 終了時点まで進める Animation メソッドを使うことでアニメーションの実行を controll することができます。
Support Firefox と Chrome でサポート 実際に使う場合は pollyfill ( web-animations-js )
が必須 https://caniuse.com/#feat=web-animation
Performance
DEMO
・ JS でサポートされている関数と組み合わせれる ・ DOM 操作で直接 HTML 要素をアニメーションできる ・ 止まったり再開したり、アニメーションの制御ができる
CSS Animations との比較
・ アニメーションロジックを JS で一元管理 ・ アニメーションの詳細に大きく依存 ( case by case
) まとめ CSS Animations UI 関連の 小さなアニメーション WAAPI 細かな controll を必要とするより 高度なアニメーション& エフェクト
THANKS!