人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

Chrome DevTools を使ってみよう (24) アニメーションを調節する:cubic bezier editor

2017年 09月 07日
CSSによるアニメーション表示は、次第に市民権を得つつある様です。 ブラウザによる表示対応が次第に均質になり、誰もが簡単にこの機能を実現できる様になって来ました。

DevToolsには、アニメーションに関するCSSプロパティ値を、動作を見ながら調節できる優れた機能があります。 それが「cubic bezier editor」で、bezier(ベジェ曲線)で設定値をコントロールします。

以下は、表示文字を明滅させる簡単なコードを調節している所で、その文字をターゲットにDevToolsを起動しています。

Chrome DevTools を使ってみよう (24) アニメーションを調節する:cubic bezier editor_a0349576_11153760.png

この文字を修飾するCSS項に、「animation」を指定したコードがあります。 DevToolsは、この様な「animation」プロパティの値には特別なアイコンを表示します。


 アニメーションを指定する値を編集する 


このアイコンをクリックすると、「cubic bezier editor」が起動して、判り難い書式の値を簡単に編集することができます。

エディターは下の様なものです。

Chrome DevTools を使ってみよう (24) アニメーションを調節する:cubic bezier editor_a0349576_11483876.png

はベジェ曲線の基本型を選択するものです。 これを切り替えるとの枠内で、基本形をベースにした6種の「ease-in-out」等を選択できる様になります。 しかし難しく考える必要はありません。 ❶❷は調節のスタートの指定で、どこから始めても目的の曲線を得られます。 曲線と動作の見本位に考えれば良いでしょう。


 エディターの主要な操作 

調節の要点は の2個の「印」をドラッグする事です。 ドラッグをするとChrome画面上のターゲットのアニメーションの様態が変化します。 それを見ながら目的の動作に近付ければ良いのです。

●ドラッグの際、左右方向の範囲はグラフエリア枠の範囲ですが、上下方向はエリア枠を越える事が出来ます。

Chrome DevTools を使ってみよう (24) アニメーションを調節する:cubic bezier editor_a0349576_13110842.png

●下の には、実際のプロパティ値が表示されます。(は表示だけで編集はできません)
●このエディタは、「cubic bezier」値を編集しますが、「animation」の他のプロパティ値の時間(duration)値「1s」等は、Toolsの右ウインドウ(CSS)に戻って指定する必要があります。


 動きを別の視点で表示 

エディタの最上部 は、ベジェ曲線の縦軸の変化を視覚化したものです。

Chrome DevTools を使ってみよう (24) アニメーションを調節する:cubic bezier editor_a0349576_12193282.png

の部分をクリックすると、何度も動作を表示します。 Chromeの画面上で「他要素に移動が隠れる場合」の調節など、色々と必要な場面がありそうです。


 目的の動作が得られたらCSS項をコピー 

DevToolsは、実験的にコードを調節する仮想環境を提供しています。 エディターの操作で得られた目的に合ったCSS項やプロパティ値は、コピーしてメモ帳などで保存し、ブログスキンなどのCSSに登録して、初めて実用利用できます。

〔参考〕
アニメーションのプロパティ値は奥が深いので、判らない事は以下のサイト等で調べてください。




この記事はカテゴリ「スキン編集」にトラックバックしています。



by Ataron | 2017-09-07 13:06 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。