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. CSS Animations vs WAAPI
    FukuokaJS #6 / 2018.09.13

    View full-size slide

  2. PROFILE
    Keitaro Okamura
    karabiner.inc
    Frontend Engineer
    フロントエンドエンジニア0年生
    @karaagekeitaroo

    View full-size slide

  3. Web Animations API is 何?
    新しい Web Animation Framework となる JavaScriptのAPI
    簡単に言うと、CSS Animation の keyframe 制御を
    JS から可能にしたようなもの
    ( W A A P I )

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 1. Let’s create Animation!
    element.animate(keyframes, options);
    WAAPI を使用してアニメーションを作成するには、keyframes
    と options の 2 つの引数をとる
    Element.animate() 関数を使用します。

    View full-size slide

  7. 1. Let’s create Animation!
    element.animate(keyframes, options);
    WAAPI を使用してアニメーションを作成するには、keyframes
    と options の 2 つの引数をとる
    Element.animate() 関数を使用します。
    Sample

    View full-size slide

  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);を設定しており、
    それを直線的に動かしています。

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. 3. options → WAAPI の場合
    const zoomOptions = {
    duration: 2000,
    easing: 'linear',
    delay: 150,
    iterations: Infinity
    }
    animate() 関数に渡す2番目の引数は、
    いくつかのオプションを持つ Object です。

    View full-size slide

  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;
    一括で指定する場合

    View full-size slide

  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 再生・停止

    View full-size slide

  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 開始する繰り返しポイント

    View full-size slide

  15. 4. controll
    const animation = element.animate(keyframes,
    options);
    animation.play(); // 再生
    animation.pause(); // 一時停止
    animation.reverse(); // 逆再生
    animation.cancel(); // キャンセル
    animation.finish(); // 終了時点まで進める
    Animation メソッドを使うことでアニメーションの実行を
    controll することができます。

    View full-size slide

  16. Support
    Firefox と Chrome でサポート
    実際に使う場合は pollyfill ( web-animations-js ) が必須
    https://caniuse.com/#feat=web-animation

    View full-size slide

  17. ・ JS でサポートされている関数と組み合わせれる
    ・ DOM 操作で直接 HTML 要素をアニメーションできる
    ・ 止まったり再開したり、アニメーションの制御ができる
    CSS Animations との比較

    View full-size slide

  18. ・ アニメーションロジックを JS で一元管理
    ・ アニメーションの詳細に大きく依存 ( case by case )
    まとめ
    CSS Animations
    UI 関連の
    小さなアニメーション
    WAAPI
    細かな controll を必要とするより
    高度なアニメーション& エフェクト

    View full-size slide