morphing-icons

モーフィングアイコン

このスキルでは、同じ3本のSVG線を動かしてモーフィングするアイコンを作成またはレビューします。線の数は変わらないため、どのアイコンからでも別のアイコンへモーフィングできます。

各チェックはペアです。問題のある線の隣に、それを置き換える線を示します。

線は必ず3本にします。14 の viewBox が公開座標系で、中心は 7 です。3本目の線を省略した2本のチェックは指摘事項です。アイコン周辺のボタンの押下・ホバーのタイミングは timing-functions に属します。線のモーフィング自体には、このスキルのトランジションを使用します。

使用する場面

モーフィングするアイコンの作成、2つのアイコン間のアニメーション、またはSVG線を補間するアイコンコンポーネントのレビューを依頼された場合に使用します。2つの <svg> ツリー間のクロスフェードには使用しないでください。

1. モデルを固定する

各線は { x1, y1, x2, y2, opacity? } です。各アイコンは { lines, rotation?, group? } で、lines は3本のタプルです。折りたたまれた線は中心で長さが0になり、opacity: 0 を指定します。

const CENTER = 7;
const collapsed = { x1: CENTER, y1: CENTER, x2: CENTER, y2: CENTER, opacity: 0 };

2. 制約内で描画する

各アイコンの線は3本です。使用しない線は collapsed にし、null にしたり省略したりしないでください。これらは morphing-three-lines と morphing-use-collapsed の指摘事項です。すべてのアイコンで同じ viewBox を使用します。公開サイズは 14 × 14 です。これは morphing-consistent-viewbox の指摘事項です。

チェックでは3本目の線を折りたたんだ状態にします。メニューには実際のストロークを3本使用します。「more」アイコンには長さ0のドットを3つ使用します。4方向の矢印などの回転バリエーションでは、1つの線リストと1つの group を共有し、rotation を 0、90、180、または -90 にします。arrow-down と arrow-right で異なる点のリストを使うと、morphing-group-variants の指摘事項になります。

3. 線を動かす

ストロークの補間には ease: [0.19, 1, 0.22, 1] と duration: 0.4 を使用します。この時間はモーフィング用であり、押下やホバー用ではありません。グループ内の回転には useSpring を使ったスプリングを使用します。異なるグループ間を移動する場合は、アニメーション付きの set ではなく rotation.jump を呼び出します。これらは morphing-spring-rotation と morphing-jump-non-grouped の指摘事項です。

useReducedMotion() が true の場合、トランジションの duration は 0 にします。これは morphing-reduced-motion の指摘事項です。線には strokeLinecap="round" を設定します。これは morphing-strokelinecap-round の指摘事項です。装飾目的の svg には aria-hidden="true" を設定します。これは morphing-aria-hidden の指摘事項です。

4. 指摘事項を報告するか作成して、そこで終了する

レビューを依頼された場合は、指摘事項と要約を書きます。アイコンの作成を依頼された場合は、プロジェクトのコンポーネント内に作成し、既存のアイコンシステムに加えて別のアイコンシステムを追加しないでください。

ペア

各チェックはペアです。問題のある線の隣に、それを置き換える線を示します。

ルール	問題のある状態	置き換え
morphing-three-lines	線オブジェクトが2つのチェックアイコン	3本目の線を collapsed に設定する
morphing-use-collapsed	lines タプル内の null	collapsed 定数
morphing-consistent-viewbox	一方のアイコンは 14 のボックス、もう一方は 28 のボックス	すべてのアイコンで VIEWBOX_SIZE = 14
morphing-group-variants	独自の点で描画された arrow-down	同じ arrowLines、group: "arrow"、rotation: 90
morphing-spring-rotation	グループ化された回転に transition={{ duration: 0.3 }} を指定	その回転に useSpring を使用する
morphing-jump-non-grouped	グループが異なる場合に rotation.set を使用	rotation.jump
morphing-reduced-motion	モーフィングに視差効果を抑える分岐がない	視差効果が有効な場合は duration: 0
morphing-strokelinecap-round	strokeLinecap="butt"	strokeLinecap="round"
morphing-aria-hidden	<svg width={size} height={size}>	aria-hidden="true"

報告

重大度。 HIGH は、線の数が3本以外の場合、またはグループと線リストを共有しない回転バリアントの場合です。MEDIUM は、動きの軽減に対応する分岐がない場合、またはグループをまたいでアニメーションする回転の場合です。LOW は、バットキャップがある場合、または装飾アイコンに aria-hidden がない場合です。

検証。 対象ファイル内で宣言された値を確認してください。ブラウザーの使用は任意です。実行できなかったチェックには Not verified と記載してください。

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

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

続いて、概要を記載します。

ルール	件数	重大度

HIGH が1件でも残っている場合は Block とします。それ以外は Approve とし、軽微な項目も表に残してください。読んでいないファイルを Approve にしてはいけません。報告することがない場合は、「対応が必要な指摘はありません」と記載し、検証できなかった項目を列挙してください。