deconstruct

分解

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

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

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

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

1. 実際のモーションを記録する

ソースを開きます。コード、ライブページ、または録画を確認します。キーフレーム、トランジション、スプリング設定を読み取るか、再生速度を落としてフレームを順に確認します。1回の確認だけで作成したブレークダウンは deconstruct-capture-the-source です。

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

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

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

アニメーションするプロパティごとにトラックを1つ設けます。スケール、不透明度、ぼかし、幅、色、アイコン、ラベルなどです。各トラックには開始値、終了値、遅延時間、継続時間、イージングを記載します。「約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 です。

6. 低速で比較する

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

7. データを引き渡す

timeline.js が引き渡すデータです。状態の表とトラックを1つのオブジェクトにまとめます。リビルドではコピーではなくこのファイルをインポートするため、ビューアーと実際に提供するモーションが同じ値を読み取ります。返信にしか存在しないタイムラインは deconstruct-timeline-as-data です。ビューアーは開発時のみ表示するか、リリース前に削除し、timeline.js は残します。

対になっています

各チェックは対になっています。問題のある行の隣に、それを置き換える行があります。

ルール	問題のある行	置き換え
deconstruct-capture-the-source	一度見ただけで作成した分解	コードを読み、フレームを0.1×で確認
deconstruct-name-the-states	「縮んでから回転する」	Idle、Pressed、Copying、Copiedと、それぞれのイベント
deconstruct-every-property	「約300ms」	400ms時点で、Scale 1から0.96、120ms、ease-out
deconstruct-keep-the-curve	ease-outで近似したスプリング	記載どおりのstiffness: 400, damping: 30
deconstruct-one-clock	CSSで再現したボタン	すべてのフレームを単一のtから計算
deconstruct-scrub-the-timeline	ループするプレビューのみ	スクラバー、再生、一時停止、0.25×
deconstruct-shipped-viewer	一から作成したビューアーページ	viewer.htmlをコピーし、timeline.jsのみを作成
deconstruct-compare-slowed	通常速度で一度だけ確認	0.25×でオリジナルと再構築版を並べて比較
deconstruct-timeline-as-data	返信内で説明されたタイムライン	再構築版がインポートするtimeline.js

報告

重大度。 HIGHは、ソースを開かずに作成した分解、または状態の欠落です。MEDIUMは、タイミングの推定、カーブの平坦化、スクラブできないビューアー、または手書きのビューアーです。LOWは、低速で確認して特定したずれです。

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

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

次に、Rule | Count | Severityの概要を記載します。HIGHが残っている場合はBlock、それ以外はApproveとします。ソースから読み取れなかった値にはすべてNot verifiedと記載します。