CSS Animations vs WAAPI
by
KeitaroOkamura
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
CSS Animations vs WAAPI FukuokaJS #6 / 2018.09.13
Slide 2
Slide 2 text
PROFILE Keitaro Okamura karabiner.inc Frontend Engineer フロントエンドエンジニア0年生 @karaagekeitaroo
Slide 3
Slide 3 text
Web Animations API is 何? 新しい Web Animation Framework となる JavaScriptのAPI 簡単に言うと、CSS Animation の keyframe 制御を JS から可能にしたようなもの ( W A A P I )
Slide 4
Slide 4 text
・ CSS animation、CSS transition ・ HTML5 Canvas ・ SVG animation ・ JS の DOM 操作で実装する animation … etc. Web Animation Patterns
Slide 5
Slide 5 text
・ CSS animation、CSS transition ・ HTML5 Canvas ・ SVG animation ・ JS の DOM 操作で実装する animation … etc. Web Animation Patterns WAAPI
Slide 6
Slide 6 text
1. Let’s create Animation! element.animate(keyframes, options); WAAPI を使用してアニメーションを作成するには、keyframes と options の 2 つの引数をとる Element.animate() 関数を使用します。
Slide 7
Slide 7 text
1. Let’s create Animation! element.animate(keyframes, options); WAAPI を使用してアニメーションを作成するには、keyframes と options の 2 つの引数をとる Element.animate() 関数を使用します。 Sample
Slide 8
Slide 8 text
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);を設定しており、 それを直線的に動かしています。
Slide 9
Slide 9 text
2. keyframes → WAAPI の場合 const zoom = { transform: ['none', 'scale(1.5)', 'none'] } 1. 単一の keyframes Object を渡す 各キーは、CSS プロパティを表し、配列内の各値は、アニメー ションタイムライン上のポイントを表します。
Slide 10
Slide 10 text
2. keyframes → WAAPI の場合 const zoom = [ { transform: 'none' }, { transform: 'scale(1.5)', offset: 0.5 }, { transform: 'none' } ] 2. 配列として書き出す 配列内の各アイテムは、タイムライン上のポイントを表し、その ポイントに適用される各 CSS プロパティと値を指定します。
Slide 11
Slide 11 text
3. options → WAAPI の場合 const zoomOptions = { duration: 2000, easing: 'linear', delay: 150, iterations: Infinity } animate() 関数に渡す2番目の引数は、 いくつかのオプションを持つ Object です。
Slide 12
Slide 12 text
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; 一括で指定する場合
Slide 13
Slide 13 text
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 再生・停止
Slide 14
Slide 14 text
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 開始する繰り返しポイント
Slide 15
Slide 15 text
4. controll const animation = element.animate(keyframes, options); animation.play(); // 再生 animation.pause(); // 一時停止 animation.reverse(); // 逆再生 animation.cancel(); // キャンセル animation.finish(); // 終了時点まで進める Animation メソッドを使うことでアニメーションの実行を controll することができます。
Slide 16
Slide 16 text
Support Firefox と Chrome でサポート 実際に使う場合は pollyfill ( web-animations-js ) が必須 https://caniuse.com/#feat=web-animation
Slide 17
Slide 17 text
Performance
Slide 18
Slide 18 text
DEMO
Slide 19
Slide 19 text
・ JS でサポートされている関数と組み合わせれる ・ DOM 操作で直接 HTML 要素をアニメーションできる ・ 止まったり再開したり、アニメーションの制御ができる CSS Animations との比較
Slide 20
Slide 20 text
・ アニメーションロジックを JS で一元管理 ・ アニメーションの詳細に大きく依存 ( case by case ) まとめ CSS Animations UI 関連の 小さなアニメーション WAAPI 細かな controll を必要とするより 高度なアニメーション& エフェクト
Slide 21
Slide 21 text
THANKS!