swiftui-animation-match

SwiftUI アニメーションのマッチング

このスキルを使うと、「保存をもっと気持ちよく感じさせたい」「読み込み中のリストが退屈」といった漠然としたインタラクションへの要望を、実績のある具体的な SwiftUI アニメーションパターンに落とし込めます。あるいは、システムがすでに提供している機能を使うという、意図的な判断にもつなげられます。

このスキルは、スニペット集ではなくマッチャーです。価値を発揮するのは、判断のステップです。まずインタラクションが起きる瞬間を特定し、OS が標準で提供する機能を確認してから、カタログ化されたソースから、採用する価値のあるカスタムモーションを探します。アニメーションは、製品に人間らしさを感じさせる活気を加えます。一方、プラットフォームがすでに優れた表現を提供しているのに無理にアニメーションを追加すると、かえって体験が損なわれます。

最初にすること

1. 瞬間を特定します。要望を「ユーザーは何をしているか」「どのように感じてほしいか」「どれくらいの頻度で起きるか」に置き換えます。 references/matching-playbook.mdを読みます。ここには、瞬間の分類とシステム機能を優先するためのチェックリストがあります。
2. システム機能かカスタムかを判断します。システムのアフォーダンスがその瞬間に適している場合（Liquid Glass のクローム、.symbolEffect、スプリング、.contentTransition、ズームによるナビゲーショントランジション、.sensoryFeedback）は、それを優先して作業を終えます。
3. カスタムモーションを採用する価値がある場合は、アニメーション名ではなく、インタラクションパターンやキーワードで以下のカタログを検索します。
4. そのまま貼り付けず、適応させます。各カタログ項目には移植時の注意事項があり、カタログの末尾には移植時のチェックリスト（置き換える依存関係、最新化する古いパターン、「視差効果を減らす」への対応）があります。
5. モーションを実際に確認します。Previews または Simulator でビルドして動作を確認します。モーションはコードだけでは評価できません。アプリのリポジトリにビルド／テスト用スキル（例：bootstrap-ios）がある場合は、それを使います。

カタログ

必要なカタログだけを読み込みます。項目はインタラクションが起きる瞬間ごとにまとめられ、キーワード、正確なソースパス、手法の概要、移植時の注意事項が記載されています。

カタログ	内容
catalog-shubham0812-swiftui-animations.md	SwiftUI アニメーション 30 種類と Metal シェーダー 7 種類：ローダー、進捗表示、アクションへのフィードバック、トグル、カードデッキ、テキストのヒーロー演出、入力欄のクローム、表示演出、シェーダー効果

固定コミットとライセンスを記載したソースインデックスは、references/sources.mdにあります。

モードの選び方

製品で必要なもの...	参照先
作り込まれた不確定な待ち時間の表示	カタログ：待機状態
実際のパーセンテージを示す進捗表示	カタログ：実際のパーセンテージを示す進捗表示
タップへの確認、祝福、または非同期処理完了のフィードバック	カタログ：アクションへのフィードバックと確認
個性のある切り替えやモード変更	カタログ：個性のあるトグルとスイッチ
ジェスチャーでカード、デッキ、カルーセルを閲覧	カタログ：カードとジェスチャーによる閲覧
ヒーロー見出しやオンボーディングの演出	カタログ：テキストとヒーロー演出
心地よさを加えた入力欄のクローム	カタログ：入力欄のクローム
ロック解除、表示演出、ブランドのイースターエッグ	カタログ：表示演出とブランドの楽しさ
破壊、エラー、プレミアムな画像表現	カタログ：Metal シェーダー効果
計画中に「X に合うアニメーションは？」と考える	まずmatching-playbook.md、次にカタログ
このスキルに新しいアニメーションリポジトリを追加する	adding-a-source.md

控えめに使うためのルール

• 画面ごとに、際立たせるモーションは 1 つにします。それ以外は控えめにします。
• 発生頻度に応じて強度を調整します。頻繁に起きるインタラクションには、控えめで短いモーション（またはシステムのデフォルト）を使い、まれにしか起きない場面では演出的な表現を使えます。
• アニメーションが優れているシステムのクローム（タブバー、ツールバー、シート、Liquid Glass のサーフェス）を独自の見た目に変更しないでください。カスタムモーションは、プラットフォームのクロームではなくコンテンツに取り入れます。
• 「視差効果を減らす」に対応し、クロスフェードまたは動きを抑えたバリエーションを用意します。
• アプリ全体でモーションの語彙を統一します。スプリングの感触と時間の尺度を揃えます。穏やかな雰囲気のアプリにカタログの項目をそのまま取り入れると、カーブをアプリの雰囲気に合わせて調整するまでは違和感が生じます。

適応方針

カタログには、実際のリポジトリにある動作するコードが、その古さも含めて記載されています。要となる幾何学的な構成（形状、トリミング範囲、オフセットの計算、シェーダーカーネル）は維持し、周辺の実装を現代化してください。

• タイマーの状態マシン → .phaseAnimator、.keyframeAnimator、withAnimation の完了ハンドラー、または Task.sleep。
• UIKit の触覚フィードバック用ラッパー → .sensoryFeedback。
• 画面境界のハードコード → GeometryReader ／コンテナのサイズ指定。
• デモ用の色、フォント、アセット → アプリのデザイントークン。
• タイマー駆動の見せかけの進捗表示 → 実際の非同期処理。

スキルの拡張

このスキルは拡張できるように作られています。アニメーションを扱う新しいリポジトリを追加するたびに、同じエントリー形式でカタログのリファレンスファイルを作成し、sources.md と上のカタログテーブルに登録します。大規模なリポジトリで複数の調査担当を並行して進める方法や、正確なエントリーテンプレートを含む、繰り返し使える手順は references/adding-a-source.md をご覧ください。