Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

アニメーションの調査

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 つの方法でアニメーションを変更できます。

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

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

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

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

長さの変更

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

変更されたキーフレーム

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

遅延の変更