スキル自身の言葉で
React NativeとExpoにおけるモーションのための構築スキルです。アニメーションの依頼を、実機でのレビューに耐える実装へと変換し、感覚が正しく感じられるかどうかを左右する順序で判断を下します：そもそもアニメーションさせるべきか、どのスレッドで実行するか、どのプロパティか、springかtimingか、ジェスチャーの受け渡し方法、どのように劣化させるか。
すべては3つのモバイルの事実から導かれます：hoverが存在しないこと、2つのランタイムが存在すること、そしてユーザーの指が要素の上にあることです。Expoアプリのアニメーション、ジェスチャーの追加、シート、画面遷移、押下フィードバック、ハプティクス、あるいは実機でカクつくモーションの修正を行うすべての人のためのものです。コードはReanimated、Gesture Handler、Expo Router、expo-hapticsを用いて記述されています。
生成されるもの
- 選択肢として提示するのではなく、直接記述された実装コードそのものです。
- 頻度ティアと名前付きの目的を示す短いゲート結果で、何が却下されたか、その理由も含みます。
- 材料となる要素の一覧：ツール、プロパティ、springまたはcurveとduration、そして処理がどのランタイム上で行われるか。
- デバイス上で体感チェックすべき項目のリストです。ジェスチャーの受け渡しやハプティックのタイミングはコードだけでは判断できません。
仕組み
- 01何よりもまずアニメーションをゲートする
頻度テーブルは、そもそもモーションを発生させるかどうかを決定します。最上位ティアは処理を止め、コードを一切書きません。タブはヒエラルキーではなくピアなので、タブ切り替えでスライドすることはありません。
- 02目的を一言で名付ける
このスキルは、先に進む前に単一語の意図を強制します——フィードバック、空間的一貫性、状態の提示、急激な変化の防止、説明、あるいはディライト（ディライトは初回のみの稀な瞬間に限る）です。
- 03機能する最も安価なツールを選ぶ
テーブルを上から順に確認し、最初に当てはまる行で止めます：CSS transition、CSS keyframes、layout animation、shared valueとGesture、次にネイティブスタック、formSheet、NativeTabs、Link.Menu、RefreshControl、Lottie、Skiaの順です。
- 04アニメーションするプロパティを制限する
transformとopacityはコストがかかりませんが、それ以外はレイアウトパスを発生させ、対象ノードとその兄弟要素についてYogaを毎フレーム再実行させます。
- 05指の動きからspringかtimingを選ぶ
指が起点となるインタラクションには、中断時に速度が持続するようspringを使用します。それ以外はtimingカーブを使用し、ease-inは使いません。
- 06フレームをJSスレッドから外す
shared valueはReactのstateではなくuseAnimatedStyleに渡され、RNランタイムの呼び出しはジェスチャーの更新内で発火させるのではなく、onEndまたは閾値到達時の反応に押し出されます。