アニメーションの調査

Chrome DevTools のアニメーション インスペクターでアニメーションを調査して変更します。

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

TL;DR

  • アニメーション インスペクターを開いてアニメーションを取得します。アニメーションが自動的に検出され、グループに分けられます。
  • アニメーションの速度を遅くしたり、再生したり、ソースコードを表示したりして、アニメーションを調査します。
  • タイミング、遅延、長さ、またはキーフレーム オフセットを変えて、アニメーションを変更します。

概要

Chrome DevTools のアニメーション インスペクターの目的は主に次の 2 つです。

  • アニメーションの調査。アニメーション グループの速度を遅くしたり、再生したり、ソースコードを調べたりします。
  • アニメーションの変更。アニメーション グループのタイミング、遅延、長さ、またはキーフレーム オフセットを変更します。 ベジエ編集とキーフレーム編集は、現在サポートされていません。

アニメーション インスペクターは、CSS アニメーション、CSS 遷移、ウェブ アニメーションをサポートしています。requestAnimationFrame アニメーションは現在サポートされていません。

アニメーション グループとは

アニメーション グループは、互いに関連しているように見えるアニメーションのグループです。 現在、ウェブにはグループ アニメーションという概念は実際にはないため、モーション デザイナーとデベロッパーは、個々のアニメーションが一貫性のある 1 つの視覚効果として見えるようにこれらを構成し、タイミングを調整する必要があります。 アニメーション インスペクターは、開始時間(遅延などは除く)に基づいて、どれが関連するアニメーションかを予測し、それらをグループ化して順に並べます。 言い換えると、同じスクリプト ブロック内でトリガーされるすべてのアニメーションが同じグループにまとめられますが、それらが非同期の場合は、別のグループにまとめられます。

使ってみる

アニメーション インスペクターを開くには、次の 2 つの方法があります。

  • [Elements] パネルの [Styles] ペインにアクセスし、[Animations] ボタン([animations] ボタン)ボタンを押します。

  • [Command Menu] を開き、Drawer: Show Animations と入力します。

アニメーション インスペクターが、[Console] ドロワーの隣にタブとして開きます。これはドロワー タブであるため、任意の DevTools パネルから使用できます。

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

アニメーション インスペクターは、4 つのメイン セクション(ペイン)に分かれています。このガイドでは、各ペインを次のように呼びます。

  1. コントロール。ここから、現在取得されているすべてのアニメーション グループを消去したり、現在選択されているアニメーション グループの速度を変更したりできます。
  2. 概要。ここでアニメーション グループを選択し、詳細ペインで調査して変更します。
  3. タイムライン。 ここからアニメーションを一時停止および開始したり、アニメーションの特定の時点にジャンプしたりします。
  4. 詳細。 現在選択されているアニメーション グループを調査して変更します。

注釈付きアニメーション インスペクター

アニメーションを取得するには、アニメーション インスペクターが開いている状態で、単純にアニメーションをトリガーする操作を実行します。 ページの読み込み時にアニメーションがトリガーされた場合は、ページを再読み込みすることで、アニメーション インスペクターがアニメーションを検出できるようにすることができます。

アニメーションの調査

取得したアニメーションは、複数の方法で再生できます。

  • 概要ペインでサムネイルにカーソルを合わせると、プレビューが表示されます。
  • 概要ペインからアニメーション グループを選択し(選択すると詳細ペインに表示されます)、再生ボタン(再生ボタン)を押します。アニメーションがビューポートで再生されます。現在選択されているアニメーション グループのプレビュー速度を変更するには、アニメーション速度ボタン(アニメーション速度ボタン)をクリックします。赤い縦線を使用すると、現在の位置を変更できます。
  • 赤い縦線をクリックしてドラッグすると、ビューポートのアニメーションを自由に動かすことができます。

アニメーションの詳細の表示

アニメーション グループを取得したら、概要ペインでそのグループをクリックすると、詳細が表示されます。 詳細ペインでは、各アニメーションが個別の行に表示されます。

アニメーション グループの詳細

アニメーションにカーソルを合わせると、ビューポートでハイライト表示されます。アニメーションをクリックすると、[Elements] パネルでアニメーションが選択されます。

アニメーションにカーソルを合わせてビューポートでハイライト表示する

アニメーションの左端にある、色が濃いセクションはアニメーションの定義です。右側の、色が薄いセクションは反復を表します。 たとえば、以下のスクリーンショットでは、セクション 2 と 3 がセクション 1 の反復を表しています。

アニメーションの反復の図

2 つの要素に同じアニメーションが適用されている場合、アニメーション インスペクターではそれらに同じ色が割り当てられます。 色そのものはランダムに割り当てられ、意味はありません。たとえば、以下のスクリーンショットでは、div.eye.left::afterdiv.eye.right::after の 2 つの要素に同じアニメーション(eyes)が適用されており、div.feet::beforediv.feet::after 要素に同じアニメーションが適用されています。

色分けされたアニメーション

アニメーションの変更

アニメーション インスペクターでは、次の 3 つの方法でアニメーションを変更できます。

  • アニメーションの長さ。
  • キーフレームのタイミング。
  • 開始時間の遅延。

このセクションでは、以下のスクリーンショットが元のアニメーションを表しているとします。

変更前の元のアニメーション

アニメーションの長さを変更するには、最初の円または最後の円をクリックしてドラッグします。

長さの変更

アニメーションでキーフレーム ルールが定義されている場合、それらのルールは内側が白い円で表されます。 キーフレームのタイミングを変更するには、それらの円のいずれかをクリックしてドラッグします。

変更されたキーフレーム

アニメーションに遅延を追加するには、円以外の任意の場所をクリックしてドラッグします。

遅延の変更