モバイルタッチアニメーション

モバイルジェスチャー、ハプティクス、ネイティブアプリケーションのモーションにディズニーの12のアニメーション原則を適用します。

クイックリファレンス

原則	モバイル実装
スクワッシュ&ストレッチ	ラバーバンディング、スクロール限度でのバウンス
予期	表示前のピーク、長押しプレビュー
ステージング	シートプレゼンテーション、フォーカス状態
ストレートアヘッド / ポーズトゥポーズ	ジェスチャー駆動 vs プリセット遷移
フォロースルー / オーバーラップ	運動量スクロール、後引き要素
スローイン / スローアウト	iOSスプリングアニメーション、Material イージング
アーク	スワイプから削除までのカーブ、カードスロー
セカンダリアクション	ビジュアルフィードバック付きハプティクパルス
タイミング	タッチ応答 <100ms、遷移 250-350ms
誇張	バウンス振幅、ハプティク強度
立体描写	セーフエリア尊重、一貫したアンカー
アピール	最小60fps、ジェスチャー連続性

原則の適用

スクワッシュ&ストレッチ: スクロール境界でラバーバンド効果を実装します。プルトゥリフレッシュはコンテンツを自然に拡張する必要があります。ボタンはタッチ時に圧縮されます。

予期: 長押しは完全なアクション前にプレビューを表示します。ドラッグしきい値はアイテムが持ち上がる前にビジュアルヒントを提供します。スワイプは目的地コンテンツのエッジを表示します。

ステージング: シートプレゼンテーションを使用してコンテキストを維持します。モーダルフォーカス中は背景を暗くしてスケーリングします。ヒーロートランジションはビューを意味のある方法で接続します。

ストレートアヘッド vs ポーズトゥポーズ: ジェスチャーフォロー型アニメーション（ドラッグ、ピンチ）はストレートアヘッド—タッチ入力で駆動されます。システムトランジション（プッシュ、プレゼント）はポーズトゥポーズ—事前定義されたキーフレーム。

フォロースルー & オーバーラップ: 指が持ち上がった後、コンテンツは移動を続けます（運動量）。ナビゲーションバー要素はメインコンテンツの後でわずかにアニメーション化されます。リストアイテムはスタッガーで落ち着きます。

スローイン / スローアウト: iOSはスプリング物理学を使用します—質量、剛性、減衰を設定します。Android Materialは標準イージングを使用します: FastOutSlowIn。ユーザーが開始するモーションには線形を使用しないでください。

アーク: スローされたカードは放物線弧に従います。スワイプから削除は速度ベクトルに基づくカーブです。FAB展開/折りたたみは自然なアーク経路に従います。

セカンダリアクション: ハプティクフィードバックをビジュアル応答と組み合わせます。ボタンリップルはプレスに伴います。成功チェックマークは軽いハプティクをトリガーします。

タイミング: タッチ確認: <100ms。クイックアクション: 150-250ms。ビュー遷移: 250-350ms。複雑なアニメーション: 350-500ms。ハプティクはビジュアルと正確に同期すべき。

誇張: プルトゥリフレッシュは自然を超えて拡張します—フィードバックを明確にします。エラーシェイクは顕著です。成功アニメーションは適切に祝福されます。

立体描写: アニメーション中にデバイスセーフエリアを尊重します。一貫したトランスフォーム原点を維持します。モーション経路内のノッチ/ダイナミックアイランドを考慮します。

アピール: 最小60fps、ProMotionディスプレイで120fpsをターゲット。ジェスチャー駆動アニメーションは指への接続を感じさせるべき。割り込み可能なアニメーションが必須。

プラットフォームパターン

iOS

// フォロースルーを伴うスプリングアニメーション
UIView.animate(withDuration: 0.5,
               delay: 0,
               usingSpringWithDamping: 0.7,
               initialSpringVelocity: 0.5,
               options: .curveEaseOut)

// ハプティクペアリング
let feedback = UIImpactFeedbackGenerator(style: .medium)
feedback.impactOccurred()

Android

// Material スプリングアニメーション
SpringAnimation(view, DynamicAnimation.TRANSLATION_Y)
    .setSpring(SpringForce()
        .setStiffness(SpringForce.STIFFNESS_MEDIUM)
        .setDampingRatio(SpringForce.DAMPING_RATIO_MEDIUM_BOUNCY))
    .start()

ハプティクガイドライン

アクション	iOS	Android
選択	.selection	EFFECT_TICK
成功	.success	EFFECT_CLICK
警告	.warning	EFFECT_DOUBLE_CLICK
エラー	.error	EFFECT_HEAVY_CLICK

ハプティクはセカンダリアクション—常にビジュアル確認と組み合わせます。