Appleのモーション
HIGはモーションを原則としてカバーしていますが、そこで止まっています。HIGのMotionページはアニメーションを行うべきかどうか(目的を持って、オプションとして、ジェスチャに従って)について92行の記述があり、スプリングパラメータは一つもありません。動きが実際にどのように構築されるかに関するすべてはその外側に存在しており、このドキュメントが存在する理由です。
| ファイル | 内容 |
|---|---|
references/motion-animation.md | スプリングの用語、持続時間、トランジションの種類、割り込み可能性。 |
references/microinteractions-feedback.md | プレス状態、ローディング、成功・エラーフィードバック、触覚のペアリング。 |
references/gestures-interaction.md | スワイプ、ドラッグ、ピンチ、エッジジェスチャと、それらにモーションがどのように追従すべきか。 |
各情報の出どころ
はっきり述べておく価値があります。なぜなら、三つの情報源は立場が大きく異なり、それらを混同するとモーションに関するアドバイスが民間伝承になってしまうからです:
- 原則 →
hig-guide「目的を持ってモーションを追加する」 「モーションをオプションにする」 「人々のジェスチャと期待に従った現実的なフィードバックモーションを目指す」 これらはApple自身の言葉であり、Motion に記載されています。これを引用してください。ここでの言い換えではありません。 - スプリング名とその動作 → SwiftUIのAPI
.smooth、.snappy、.bouncyは実際のデフォルト値を持つ実際のAPIです。motion-animation.mdのバウンス率はそれらの特性を示すものであって、公開された定数ではありません — チューニングの出発点として扱い、Appleの仕様として引用しないでください。 - その他すべて → 観察 これらのリファレンスは、MITライセンスの apple-design-skills コレクション(
LICENSE.txtに記載あり)から改作されたもので、作者が出荷アプリから動作を推測した箇所には[observed]とマークされています。有用ではありますが、権威あるものではありません。
ここにあるものは、ui-kit-for-apple-platforms の値のように測定されたものは何もありません。その違いこそがポイントです。モーションは、このリポジトリの中で最も裏付けとなる根拠が少ない部分です。
スプリングの選択
最もフィーリングを左右する一つの選択:
| スプリング | バウンス | 使用場面 |
|---|---|---|
.smooth | なし | シート、モーダル、背景のトランジション — 注目を集めずに落ち着くべきものすべて |
.snappy | わずか | ボタン押下、トグル、選択 — 直接操作のデフォルト |
.bouncy | 顕著 | アイコン押下、通知の到着、報酬のように感じられるべき瞬間 |
バウンスこそがすべてのシグナルです。バウンスするシートはおもちゃのように読み取られ、バウンスしないボタン押下は死んでいるように読み取られます。この一つの選択を正しく行うことは、持続時間をチューニングするよりも効果的です。
Appleのモーションを通常のモーションと区別するもの
- 割り込み可能 ジェスチャは、アニメーションの途中でそれを逆行またはリダイレクトできなければならず、後ろにキューイングしてはいけません。応答する前に完了するものは、どれだけ速くても遅く感じられます。
- 指を追跡し、その後引き継ぐ ドラッグ中、サーフェスはジェスチャに1:1で追従します。スプリングはリリース時にのみ引き継ぎ、ジェスチャが持っていた速度を運びます。これはHIGの 「人々のジェスチャと期待に従った現実的なフィードバックモーション」 を具体化したものです。
- 持続時間は結果であり、入力ではない スプリングは物理法則で指定され、落ち着くときに落ち着きます。固定の300ミリ秒を求めることは、通常は間違ったツールを求めていることを意味します。
- 位置と不透明度、サイズと色ではない 移動とフェードは物理的に読み取られます。拡大縮小と色変更はエフェクトとして読み取られます。
Reduce Motionはオプションではない
hig-guide は明確に述べています — 「モーションをオプションにする」 Web上ではそれは prefers-reduced-motion であり、動きを短くするのではなく置き換えることを意味します:スライドの代わりにクロスフェード、アニメートの代わりにカット。ui-kit-for-apple-platforms の ios-components.css は既に自身のトランジションをこのようにガードしています。それに合わせてください。
境界
- 値(色、タイポグラフィ、コントロールの形状、マテリアル)は ui-kit-for-apple-platforms に属し、AppleのUIキットから測定されています。ここでそれらを言い直さないでください。モーションファイル内の16進カラーコードは、誰も見ない場所で古くなるコードです。
- 何かをアニメーションさせるべきかどうか、どのプレゼンテーションを使用するか、レイアウトがどのように適応するかに関するルールは hig-guide に、実際の引用とともにあります。
- このスキルは、動き自体がどのように構築されるかをカバーします。