apple-design-motion

Apple Design — モーション (アニメーション · ジェスチャー · フィードバック)

Apple がインターフェイスを生き生きと感じさせる方法: スプリング駆動、中断可能、応答性が高い。

使用する場面

• あらゆるトランジション、アニメーション、ジェスチャー、または押下/ローディングのフィードバックを追加するとき。
• Web のモーションを、定型のイージングではなく「Apple らしく流動的」に感じさせたいとき。

核心となるルール

• 固定イージングよりスプリング。 Apple はスプリング (mass/stiffness/damping) でアニメーションし、response + dampingFraction (または duration + bounce) としてパラメータ化します。Web ではスプリングのパラメータから CSS の linear() カーブを生成してください — ease をデフォルトにしてはいけません。
• 中断可能 + 速度の引き継ぎ。 pointerdown で応答し、ジェスチャーのリリース速度をスプリングに引き継がせ、飛行中の方向転換を許可します。アニメーションの背後で入力をブロックしないでください。
• transform/opacity のみをアニメーション (GPU コンポジット) し、will-change は控えめに使います。レイアウトプロパティをアニメーションしないでください。
• すべてのアクションにフィードバックを — 視覚的な押下状態 (scale/dim) は常に、触覚は利用可能な場所で。Web Vibration API は iOS Safari では動作しません — 触覚的な感触のためにこれに頼ってはいけません。
• prefers-reduced-motion を尊重する: 大きな動きではなく、フェードまたは即時表示の代替を提供します。
• フラッグシップページでは連続的なスクロール進行にバインドする。 フラッグシップ/マーケティングページでは、モーションを (減衰させた) 連続的なスクロール進行にバインドし (「読み」を滑らかにし、スクロールを決して乗っ取らない)、単なるビュー内表示だけにしないでください。可逆的でマルチレートなスクロール進行モーションは、死んだテンプレートと生きている Apple ページを分ける唯一最大の差別化要因です。

参照

ファイル	用途
references/motion-animation.md	スプリングのプリセット + 値、流動的インターフェイスのルール、linear() のレシピ、matchedGeometry/zoom
references/motion-animation.md → "Continuous scroll-progress motion (the aliveness primitive)"	mapRange + 減衰スクロールの rAF lerp (読みを滑らかに、スクロールジャッキングなし)、可逆/マルチレートのバインド、@supports (animation-timeline) の CSS パス、reduced-motion
references/motion-animation.md → "Pointer-reactive motion (desktop sugar)"	マグネティックボタン / チルト / スポットライトのバニラレシピ、pointer:fine + reduced-motion のハードゲート、単一 rAF ティックの本番向け注記
references/gestures-interaction.md	ジェスチャーの語彙、スワイプで閉じる、コンテキストメニュー、Dynamic Island、JS ポインターレシピ
references/microinteractions-feedback.md	触覚カタログ + 発火すべきタイミング、コントロールの状態、ローディングパターン、iOS Web 触覚のギャップ

よくある間違い

• どこでも ease/linear、長く、中断できず、入力をブロックするアニメーション。
• transform ではなく width/top/height をアニメーション、reduced-motion を無視。
• タップのフィードバックがない、触覚の乱発 / 二重発火、Web の振動が iOS で動作すると仮定すること。

関連: 動いているガラス → apple-design-materials · スクロール駆動の Web モーション → apple-design-web · a11y としての reduce-motion → apple-design-tactics。

このスキルは、上記の再利用可能なスクロール/ポインターエンジンのプリミティブを所有します。それらを土台に構築するページレベルのスクロール コンポジション — テーマ/背景のモーフ、スティッキー積み重ねカード、スクラブされるキャンバスヒーロー — は apple-design-web にあります。サーフェス軸の判断 (特定のサーフェスがそもそも連続的なモーションにコミットすべきかどうか) は apple-design の restraint-and-antislop.md にあります。