アニメーションを扱う

本記事では、アニメーションの視覚化と編集が可能な 3 つのツールを扱います:

アニメーションインスペクター

ページインスペクターの アニメーションビュー では、ページ内のアニメーションを時間の時系列に沿って表示します。また、時系列上の任意の位置に移動するために使用する、ドラッグ可能なウィジェットがあり、ある時点のページの状態を確認できます。

このビューでは CSS トランジションCSS @keyframes 規則Web Animations API を使用して作成したアニメーションを表示します。Firefox 48 より、::before および ::after 疑似要素に適用したアニメーションも表示します。

ビューの動作を知るために、サンプルを使用してひととおり見ていきましょう。以下のボックス内に、Firefox Developer Edition を表すグレースケールのアイコンがあります。アイコンをクリックすると膨張して色がつき、ブラウザ名が現れます。もう一度アイコンをクリックすると、元に戻ります。

これらのアニメーションは、Web Animations API を使用して作成しました。

このサンプルで何が起きているかを、アニメーションインスペクターで見ていきましょう。

  1. ボックス内を右クリックして [要素を調査] を選択します。
  2. <div class="channel"> 要素が選択されていることを確認します。
  3. [アニメーション] タブに切り替えます。
  4. アニメーションを再生します。

ここで、アニメーションインスペクターの内容を詳しく見ていきましょう:

これは、選択中の要素や子要素に適用されているすべてのアニメーションをひとつの時系列に表示したタイムラインです。時系列は最初のアニメーションの開始時点から始まり、最後のアニメーションの終了時点で終わります。また、250 ミリ秒ごとにマーカーがついています (表示しているアニメーションの時間規模に依存します)。

アニメーションバー

それぞれのアニメーションやトランジションは、時系列に沿って水平方向に並ぶバーとして表示します。また、バーは以下のように表示します:

Compositor スレッドを使用してプロパティのアニメーションを行っている場合は稲妻のアイコン () を表示します (詳しくは さまざまな CSS プロパティでアニメーションを行うコスト をご覧ください)。

Firefox 52 よりバーの形状が、アニメーションで使用するイージング効果を反映するようになりました。前出の例では 1 番目のバーが凹型で ease-in、2番目のバーが凸型で ease-out を表していることがわかります。

CSS トランジションのアニメーションでは、それぞれのプロパティのトランジションをひとつのバーで表し、トランジションを行うプロパティの名称を記載します。CSS @keyframes のアニメーションでは、それぞれのアニメーションをひとつのバーで表し、キーフレームの名前を記載します。

アニメーションやトランジションに遅延がある場合は、その部分を斜線で網掛け表示します。delay および endDelay の両方を表します。

バーにマウスポインターを載せると以下の情報を含む、アニメーションやトランジションの詳細情報を記載したツールチップを表示します:

  • アニメーションの種類: CSS トランジション、CSS アニメーション、Web Animations API
  • アニメーションの再生時間
  • アニメーションの開始および終了時の遅延
  • アニメーションのイージング (またはタイミング関数)

アニメーションする要素の情報

バーの左側に、アニメーションを適用した要素のセレクターがあります。セレクターにマウスポインターを載せると、ページ上で要素をハイライト表示します。セレクターをクリックすると、要素をインスペクターで選択します。

セレクターの左側に、"標的" のアイコン () があります。このアイコンをクリックすると、要素をハイライト表示したままにします。

アニメーションの詳細情報

バーをクリックすると、アニメーションで変化するすべてのプロパティについて詳細情報を表示します。例えば、img#icon のアニメーションのバーをクリックしてみましょう:

filtertransform の、2 つのプロパティが変化していることがわかります。それぞれのドットは、アニメーションで使用しているキーフレームのセット内にある、プロパティの項目を示します。どちらのプロパティも 0ms で開始、750ms で終了しています。filter は 250ms で、transform は 500ms で値が与えられています。ドットにマウスポインターを載せると、タイムライン上の特定の時点でプロパティに与えられた値を確認できます:

これは要するに、アニメーションの キーフレーム を視覚化したものです:

var iconKeyframeSet = [
  { transform: 'scale(1)',   filter: 'grayscale(100%)'                },
  {                          filter: 'grayscale(100%)', offset: 0.333 },
  { transform: 'scale(1.5)',                            offset: 0.666 },
  { transform: 'scale(1.5)', filter: 'grayscale(0%)'                  }
];

サンプルに応用する

これらすべてをサンプルに適用すると、以下のことがわかります:

  • アニメーションは span#note および img#icon の、2 つの要素で行っています。これらのセレクターにマウスポインターを載せると、それぞれブラウザー名 "Firefox Developer Edition" とブラウザーのアイコンであることがわかります。
  • img#icon のアニメーションについて:
    • アイコンのサイズ変更と着色のため、filter および transform プロパティでアニメーションを行っています。
    • 終端は 750ms で、100ms の endDelay があります。
    • Compositor スレッドを使用します。
    • easing の値 ease-in が指定されました。緑色のバーが凹型形状であることからわかります。
  • span#note のアニメーションについて:
    • 名称を徐々に表示するため、width および opacity プロパティでアニメーションを行っています。
    • 終端は 500ms で、150ms の delay があります。
    • easing の値 ease-out が指定されました。緑色のバーが凸型形状であることからわかります。

アニメーションを再生する

アニメーションインスペクターの上部に、以下のウィジェットがあります:

  • アニメーションの再生/一時停止および再実行するボタン
  • アニメーションの再生速度を変更するドロップダウンリスト
  • アニメーションの経過時間を表示する

最後に、時系列の上部にあるバーの内部をクリックすると、左右にドラッグしてアニメーションを前後に遷移させることが可能なスクラバーを使用できます。これにより、いつ何が起きているかを正確に把握できます:

アニメーションの合成に関する詳細情報

Firefox 49 よりアニメーションインスペクターで、アニメーションのパフォーマンスや合成に関する情報を提供する機能が向上しました。これを説明するために、サンプルを 2 つ作成しました。animation-inspector-compositing.html を開いて赤色の長方形をクリックすると、シンプルな opacity のアニメーションが始まります。Firefox 49 以降でこれをアニメーションインスペクターで見ると、以下のことがわかります:

  • 白色の稲妻アイコンは、すべてのアニメーションプロパティが Compositor を使用して実行するよう最適化されているかを示しており、有効になっています。
  • バーのツールチップにも、リマインダーとしてこの情報が含まれています。"すべてのアニメーションのプロパティが最適化されています" というメッセージがあります。
  • アニメーション情報を展開すると、Compositor によってアニメーションが最適化されているプロパティ名の隣に稲妻のアイコンを表示します。

次に animation-inspector-compositing-silly.html を見てみましょう。こちらも同様のサンプルですが、赤色の長方形をクリックすると opacity と同時に、lefttransform (translation なし) プロパティもアニメーションする点が異なります。位置プロパティと translation を同時に実行することにはあまり意味がありません (2 つの効果は同期しません) ので、transform プロパティは意図的に Compositor で扱われません。Firefox 49 以降、アニメーションインスペクターはこれをより役に立つように伝えます。アニメーションインスペクターで見ると、以下のことがわかります:

  • バーにあった白色の稲妻アイコンが灰色の稲妻アイコンに変わっており、関連プロパティの一部しか Compositor によって最適化されていないことを示します。
  • バーのツールチップにも、リマインダーとしてこの情報が含まれています。"一部のアニメーションのプロパティが最適化されています" というメッセージがあります。
  • アニメーションが最適化されていないプロパティで、コードを改良すれば最適化できるものに、点線の下線を表示します。以下のスクリーンショットで transform をご覧ください。プロパティ名にマウスポインターを載せると、理由を説明するツールチップを表示します。この例では、"同一要素上の位置プロパティを同時にアニメーションする場合、このコンポジタでは ‘transform’ のアニメーションを実行できません。" というメッセージです。

@keyframes の編集

選択中の要素に関連付けられた @keyframes 規則ルールビュー に表示します。また、編集も可能です:

タイミング関数の編集

CSS アニメーション を作成する際に、タイミング関数 を指定できます。これはアニメーションが進むペースを定義します。タイミング関数の指定方法のひとつが、3 次ベジェ曲線による指定です。

ルールビューで、3 次ベジェ曲線で定義したタイミング関数の隣にアイコンを表示します。このアイコンをクリックすると視覚的な曲線エディターを表示します。P1 および P2 をドラッグして、その結果をページ上で確認できます。

この機能は、Lea Verou の cubic-bezier.com 由来のオープンソースコードを使用しています。

3 次ベジェ曲線エディターに多くのプリセットを用意しました。これらは "Ease-in"、"Ease-out"、"Ease-in-out" にグループ化されています:

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: yyss, trevorh
 最終更新者: yyss,