Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Animations vs WAAPI

CSS Animations vs WAAPI

KeitaroOkamura

September 14, 2018
Tweet

More Decks by KeitaroOkamura

Other Decks in Programming

Transcript

  1. Web Animations API is 何? 新しい Web Animation Framework となる

    JavaScriptのAPI 簡単に言うと、CSS Animation の keyframe 制御を JS から可能にしたようなもの ( W A A P I )
  2. ・ CSS animation、CSS transition ・ HTML5 Canvas ・ SVG animation

    ・ JS の DOM 操作で実装する animation … etc. Web Animation Patterns
  3. ・ CSS animation、CSS transition ・ HTML5 Canvas ・ SVG animation

    ・ JS の DOM 操作で実装する animation … etc. Web Animation Patterns WAAPI
  4. 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);を設定しており、 それを直線的に動かしています。
  5. 2. keyframes → WAAPI の場合 const zoom = { transform:

    ['none', 'scale(1.5)', 'none'] } 1. 単一の keyframes Object を渡す 各キーは、CSS プロパティを表し、配列内の各値は、アニメー ションタイムライン上のポイントを表します。
  6. 2. keyframes → WAAPI の場合 const zoom = [ {

    transform: 'none' }, { transform: 'scale(1.5)', offset: 0.5 }, { transform: 'none' } ] 2. 配列として書き出す 配列内の各アイテムは、タイムライン上のポイントを表し、その ポイントに適用される各 CSS プロパティと値を指定します。
  7. 3. options → WAAPI の場合 const zoomOptions = { duration:

    2000, easing: 'linear', delay: 150, iterations: Infinity } animate() 関数に渡す2番目の引数は、 いくつかのオプションを持つ Object です。
  8. 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; 一括で指定する場合
  9. 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 再生・停止
  10. 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 開始する繰り返しポイント
  11. 4. controll const animation = element.animate(keyframes, options); animation.play(); // 再生

    animation.pause(); // 一時停止 animation.reverse(); // 逆再生 animation.cancel(); // キャンセル animation.finish(); // 終了時点まで進める Animation メソッドを使うことでアニメーションの実行を controll することができます。
  12. ・ アニメーションロジックを JS で一元管理 ・ アニメーションの詳細に大きく依存 ( case by case

    ) まとめ CSS Animations UI 関連の 小さなアニメーション WAAPI 細かな controll を必要とするより 高度なアニメーション& エフェクト