CSS Animations vs WAAPI

CSS Animations vs WAAPI

Efaf705a006926394160a3248f16e667?s=128

KeitaroOkamura

September 14, 2018
Tweet

Transcript

  1. 3.

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

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

    ・ CSS animation、CSS transition ・ HTML5 Canvas ・ SVG animation

    ・ JS の DOM 操作で実装する animation … etc. Web Animation Patterns
  3. 5.

    ・ CSS animation、CSS transition ・ HTML5 Canvas ・ SVG animation

    ・ JS の DOM 操作で実装する animation … etc. Web Animation Patterns WAAPI
  4. 8.

    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. 9.

    2. keyframes → WAAPI の場合 const zoom = { transform:

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

    2. keyframes → WAAPI の場合 const zoom = [ {

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

    3. options → WAAPI の場合 const zoomOptions = { duration:

    2000, easing: 'linear', delay: 150, iterations: Infinity } animate() 関数に渡す2番目の引数は、 いくつかのオプションを持つ Object です。
  8. 12.

    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. 13.

    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. 14.

    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. 15.

    4. controll const animation = element.animate(keyframes, options); animation.play(); // 再生

    animation.pause(); // 一時停止 animation.reverse(); // 逆再生 animation.cancel(); // キャンセル animation.finish(); // 終了時点まで進める Animation メソッドを使うことでアニメーションの実行を controll することができます。
  12. 18.
  13. 20.

    ・ アニメーションロジックを JS で一元管理 ・ アニメーションの詳細に大きく依存 ( case by case

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