deconstruct

分解

このスキルでは、アニメーションやインタラクションを分解します。すべての状態とイベントに名前を付け、各トランジションをプロパティごとに1つのトラックに分け、ユーザーがスクラブや編集をできるページに表示します。

すべてのフレームを把握する

感覚に頼った説明はしません。すべての状態に名前を付け、すべてのトランジションにイベントを割り当て、アニメーションするすべてのプロパティについて開始値、終了値、遅延、時間、イージングを記録します。読み取れなかった値には、推測せず Not verified と記します。

計算済みの値の読み取りと、並べて比較できる証拠の提示は match の役割です。コンポーネントの状態を強制的に開くのは lab の役割です。結果を開くのは verify で行います。モーションの値が正しいかどうかは motion の役割です。

1. 実際のモーションをキャプチャする

ソースを開きます。コード、実際のページ、または録画です。キーフレーム、トランジション、スプリングの設定を読み取るか、再生速度を落としてフレームごとに確認します。一度見ただけで作成した分解は deconstruct-capture-the-source です。

2. 状態とイベントに名前を付ける

要素がとどまる状態と、それらの間を移行させるイベントを列挙します。たとえば、押下、解除、解決、タイムアウトなどです。状態、開始イベント、終了イベントの表にまとめます。「縮んでから回転する」のような説明は deconstruct-name-the-states です。

3. 各トランジションをトラックに分ける

アニメーションするプロパティごとにトラックを設けます。スケール、不透明度、ぼかし、幅、色、アイコン、ラベルなどです。各トラックには、開始値、終了値、遅延、時間、イージングを記録します。「約300ms」は deconstruct-every-property です。

カーブは記述どおりに維持します。スプリングは、剛性、減衰、質量、またはバウンスと時間を含むスプリングのままにします。スプリングを推測したベジェに平坦化するのは deconstruct-keep-the-curve です。

4. 1つのクロックで動かす

要素を1つの時間値だけを入力とする純粋関数としてレンダリングします。これにより、スクラブ、一時停止、ループ再生で、同じ時間には同じフレームが表示されます。CSSを再生するだけでトランジションの途中で止められないビューアーは deconstruct-one-clock です。

5. ビューアーを作成する

viewer.html を再構築したものの横に開発専用ページとしてコピーし、ヘッダーコメントに示された形式で timeline.js を隣に作成して開きます。要素、ステートマシン、各トラック用のレーンと現在の値が表示されます。

ビューアーはスキルに含まれているため、データだけを記述します。独自のマークアップやスタイルを持つページは deconstruct-shipped-viewer です。アクティブな状態がハイライトされ、状態をクリックするとその位置にシークします。スクラバー、再生、一時停止、0.25×を維持します。スクラバーのないタイムラインは deconstruct-scrub-the-timeline です。

インスペクターで開始値、終了値、遅延、時間、イージングを入力すると、プレビューに反映されます。セグメントをドラッグすると遅延を変更できます。右端をドラッグすると時間を変更できます。イベントマークをドラッグすると、すべてのトラック上でそのイベントの位置が変わります。セグメントではなく返信内でタイミングを変更するのは deconstruct-edit-the-segment です。

ピンチ操作、または Cmd を押しながらスクロールすると、タイムラインをズームできます。横方向にスクロールするとパンし、Fit を押すと全時間が表示されます。スライダーをドラッグすると、プレビューに反映されます。ベジェのハンドルをドラッグするか、イージングメニューからキーワードを選択します。

セグメント、レイヤー、イベントは互いにスナップし、再生ヘッドにもスナップします。Alt を押しながらドラッグすると、スナップせずに移動できます。セグメントを Shift キーを押しながらクリックすると、まとめて移動できます。

スプリングの長さはカーブから決まります。剛性、減衰、質量を変更すると長さが変わります。また、バウンスと時間で指定するスプリングの端をドラッグして変更できます。

Cmd+Z で編集を元に戻せます。編集したフィールドにはドットと Revert が表示されます。Original では読み込み時のタイムラインが再生されるため、ソースと比較して編集の良し悪しを判断できます。

6. 低速で比較する

オリジナルと再構築版を横に並べて、0.25×で再生します。recordingにはオリジナルをキャプチャしたものを設定すると、ビューアーがプレビューと同じクロックで横並びに再生します。ずれのあるフレームをすべて記録します。全速でしか確認していないブレークダウンはdeconstruct-compare-slowedです。

IとOを押すと、押下からリリースまでのような範囲をループ再生できます。オニオンスキンでは、直前のフレームがプレビューに重ねて表示されます。ワイプでは、録画がプレビューに重なり、仕切り線で区切られます。録画をプレビューのフレームに合わせてクロップし、両者の位置を揃えます。

7. データを引き継ぐ

timeline.jsが引き継ぎ用のデータです。状態テーブルとトラックが1つのオブジェクトになっています。再構築版はコピーではなくこのファイルをインポートするため、ビューアーとリリースするモーションは同じ値を読み取ります。返信の中にしか存在しないタイムラインはdeconstruct-timeline-as-dataです。「Copy Timeline」を押すと、開いているページの内容がそのオブジェクトに書き戻されます。それをtimeline.jsに貼り付けます。クリップボードへのアクセスがブロックされている場合、トーストに「Copy Failed」と表示されます。開いているページにしか残っていない編集はdeconstruct-copy-the-timelineです。リリース前にビューアーを開発環境のみに限定するか削除し、timeline.jsは残します。

対比

確認項目はすべて、対比する2つの項目で構成されます。問題のある項目と、それに置き換わる項目を横に並べます。

ルール	問題のある項目	置き換え後
deconstruct-capture-the-source	1回見ただけのブレークダウン	コードを読み、0.1×でフレームをコマ送りする
deconstruct-name-the-states	「縮んでから回転する」	Idle、Pressed、Copying、Copiedとそのイベント
deconstruct-every-property	「約300ms」	Scaleを1から0.96に、400ms時点で120ms、ease-out
deconstruct-keep-the-curve	ease-outで近似したスプリング	記述どおりのstiffness: 400, damping: 30
deconstruct-one-clock	CSSの再生ボタン	すべてのフレームを1つのtから計算する
deconstruct-scrub-the-timeline	ループ再生のみのプレビュー	スクラバー、再生、一時停止、0.25×
deconstruct-shipped-viewer	ゼロから作成したビューアーページ	viewer.htmlをコピーし、timeline.jsのみ作成
deconstruct-compare-slowed	全速で1回だけ確認	オリジナルと再構築版を横に並べて0.25×で確認
deconstruct-timeline-as-data	返信の中で説明されたタイムライン	再構築版がインポートするtimeline.js
deconstruct-edit-the-segment	「プレスを80msにする」	セグメント上で時間を編集する
deconstruct-copy-the-timeline	開いているページに残った編集	timeline.jsに貼り戻す

報告

重大度。 HIGHは、ソースを開かずに作成したブレークダウン、または状態の欠落です。MEDIUMは、時間の推定、カーブの平坦化、スクラブできないビューアー、手書きのビューアー、またはページ内にしか残っていない編集です。LOWは、低速で見つけて記録したずれです。

形式。 根本原因ごとに指摘を1件記載します。

file:line - [rule-id] what is wrong

続けて、Rule | Count | Severityのサマリーを記載します。HIGHが1件でも残っている場合はBlock、そうでなければApproveとします。ソースから読み取れなかった値はすべてNot verifiedと記載します。