Skip to content

Instantly share code, notes, and snippets.

@matori

matori/memo-2015-01-25.md

Last active August 29, 2015 14:14
Show Gist options
  • Save matori/45a3010fbd47bee2b9f3 to your computer and use it in GitHub Desktop.
Save matori/45a3010fbd47bee2b9f3 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5 Conference 参加メモ
Raw
memo-2015-01-25.md

プリンより滑らか スムーズなアニメーションの作り方 HTML5 Conference 2015 1.25

スピーカー

Brian Birtles - Working on Web Animations and Firefox at Mozilla Japan https://twitter.com/brianskold

はじめに

  • 滑らかといえばプリン
  • Firefox のアニメーションの実装の人（元は SVG アニメーション担当）
  • アニメーションは時間を通して情報を伝える手段
  • パフォーマンスの悪いアニメーションは時間がうまく使えず、情報が伝わりづらい

ブラウザーの中で何が行われているか

  • DOM ツリーの作成
  • レンダー（フレーム）ツリーの作成
  • レイアウト（リフロー）配置を決定したり、行を折り返したりする
  • リフローは重い（開発ツールで見ることができる）
  • リフローするかどうかはブラウザーやコンテンツ次第（Firefox は left プロパティなどでも発生しない）
  • transform はどのブラウザーでもリフローしない（そう決まっている）
  • レイアウトに関係ないプロパティを使うことでリフローを避けることができる
  • スタイルの情報を JS の関数から取ろうとすると、レイアウトにかかわるものの場合は最新の情報を取ろうとするのでリフローが発生する
  • getConputedStyle getClienetRect など
  • 描画領域と描画効果によっては重くなる
  • 描画領域は開発ツールで表示できるようになる
  • ブラーは重い
  • ブラーより、ぼやけた画像を transform: scale() で使ってみる
  • SVG は重い
  • SVG は <iframe> などより <img> のほうが軽い
  • レイヤーの合成は GPU が
  • レイヤーの確認は about:config の設定を変えると見られる （Chrome にも似たようなオプションがある）
  • レイヤーが自動的に作成される条件
  • 3D Transform
  • transition
  • JS アニメーション
  • 動きが始まるときにレイヤーが作成されると遅いことがある
  • ブラウザーは 16ms ごとに処理をする
  • 重い画像などだと、アニメーション開始時に処理をするとレイヤー化に時間がかかってカクカクする
  • 今の Firefox は処理が終わってからアニメーションを開始するが、開始が遅くなる
  • なので will-change でレイヤーを先に作ってもらう（古くはレイヤーハック）
  • レイヤーを作っていても、ブラウザーが忙しくなるとカクカクする
  • 主要スレッドの処理：スクリプト、リフロー、イベント処理
  • なのでコンポジットスレッドでアニメーションを処理させたい
  • CSS アニメーションはコンポジットスレッドに任せることができる（コンポジットアニメーションという）
  • コンポジターができるアニメーションは限定されている（現在は transform と opacity）
  • 現在、Firefox の場合は Firefox OS のみ
  • スクリプトで行うアニメーションは主要スレッドだが、Web Animation API を使うことでコンポジターに任せることができる（現在は Chrome のみ）
  • Firefox の開発ツールで Animation まわりで色々できる（Firefox 37 から）

まとめ

  • アニメーション時、なるべくリフローさせない
  • 重い効果を軽い効果に置き換える
  • アニメーションさせるときはレイヤーを作成する
  • レイヤーが作成されないときは will-change であらかじめ用意しておく
  • コンポジターに任せられるアニメーションを使う

質問への回答

  • アニメーションライブラリ（Velocity.js など）はスクリプトなので、主要スレッド。将来は Web Animation API を使って欲しい。

資料

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment