Chrome DevTools：Web アニメーションと console_html/css_WEB-ITnose

この記事はTTTシリーズの5回目です。今日は4つの楽しいことを紹介したいと思います。

1. Cubic Bezier ビジュアル エディター

CSS3 トランジションでは、transition-timing-function を使用してトランジションの速度効果を設定できます。 transition-timing-function は、linear、ease、ease-in、ease-out、ease-in out の 5 つの事前定義値を提供します。これらの事前定義された効果は、実際には 3 次ベジェ関数のさまざまなパラメーターの効果です。それらの対応関係は次のとおりです。

画像コンテンツは w3school から取得されます

ベジェ曲線 (ベジェ曲線) は、コンピューター グラフィックスにおける重要な曲線パラメータです。この種類の曲線は、Adobe Illustrator などのベクター エディターで見ることができ、アニメーションでは動きの効果を記述するために使用されます。これは 4 つのパラメータで構成されています:

これら 4 つのパラメータを使用すると、パーソナライズされた動きの効果をカスタマイズできますが、これらのパラメータは直感的ではありません。以前は、CSS 専門家の Lea Verou が作成した Web サイト cubic-bezier.com にアクセスして、必要な効果を視覚的に見つけて、パラメーターをアプリケーションにコピーできました。 Chrome がこの機能を提供したことで、アプリケーション内の実際の要素を DevTools で直接視覚的に編集し、実際の効果をリアルタイムでプレビューできるようになりました。

使用方法は非常に簡単です。要素検査 (検査) で CSS トランジションまたはトランジション タイミング関数を適用した要素を見つけます。要素と Cubic Bezier ビジュアル エディターがポップアップ表示されます。試してみてください! (cubic-bezier.com ページで現在の ID の要素を見つけて試してみることができます。)

2. Web アニメーションの再生

上記の Cubic Bezier エディターに比べて、Chrome では Web アニメーションのデバッグがさらにサポートされています。たとえば、この 3D NES コントローラ アニメーションの例を開き、要素検査を通じて

要素を見つけます。

CSS スタイルで、右上隅のフィルターの右にある最後のアイコン (アニメーション コントロールの切り替え) をクリックすると、下にアニメーション リボンが表示されます。ここではアニメーションの再生/一時停止や再生速度を制御できますが、これは悪くありません。

DevTools でアニメーション検査の実験機能を有効にすると、さらに高度な機能が追加されます。 DevTools の実験的機能を有効にする方法については、この記事を参照してください。

オンにすると、上のシンプルなアニメーションリボンはこのようになります。上のアニメーション ブロックをクリックすると、アニメーション実行の詳細が表示されます。

3. コンソール ログ情報のエクスポート

DevTools のコンソール ログは、右クリックしてテキストとしてエクスポートすることもできます。

4. 2015 Google I/O コンソールのイースターエッグ

2015 Google I/O 公式 Web サイトにアクセスし、DevTools コンソールを開き、左側の設定ボタンをクリックしますページの側面に移動すると、コンソールに「実験が正常にロードされました。」というメッセージが表示されます。

次に、experiment.consoleDance(); コマンドを入力すると、コンソールに ASCII 文字で作られた踊っている人が表示されます。非常に興味深いのは、原理はもちろん、大量のデータをコンソールに継続的に出力することです。

著者：韓国カイ。このシリーズの記事は、Addy と Matt のビデオ シリーズ Totally Tooling Tips の内容に基づいて再構成されたもので、主に (フロントエンド) 開発者が好むいくつかのツールやテクニックを紹介しています。

投稿ビュー数: 1

特に明記されていない限り、この記事の内容はクリエイティブ コモンズ表示 3.0 ライセンスに基づいてライセンスされており、コード サンプルは Apache 2.0 ライセンスに基づいてライセンスされています。詳細については、利用規約をご覧ください。