mcpField
M
mobile-touch

mobile-touch

github.com/dylantarreデザイン・UI1322.4k 回インストール43 週間前に更新
リポジトリ

mobile-touch について

mobile-touch は、ディズニーの 12 のアニメーション原則をモバイルのジェスチャー、触覚フィードバック、ネイティブ動作に応用するデザインスキルです。iOS と Android のパターンや時間の目安も扱います。

主な機能

  1. 01アニメーション原則のジェスチャー適用
  2. 02触覚と視覚フィードバックの連携
  3. 03動作時間の目安
  4. 04iOS と Android のパターン

活用シーン

  1. 01スクロール端のバウンス設計
  2. 02長押しプレビューとスワイプ終了の計画
  3. 03触覚と視覚反応の同期

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/dylantarre/animation-principles --skill mobile-touch

インストール後、Claude Code で/mobile-touchを入力して読み込まれたか確認します。

詳細

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

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

クイックリファレンス

原則モバイルでの実装
伸縮スクロール端でのラバーバンド効果やバウンス
予備動作表示前のちら見せや、長押しプレビュー
演出シート表示やフォーカス状態
ストレート・アヘッド／ポーズ・トゥ・ポーズジェスチャー駆動のトランジションとプリセットのトランジション
後追いとオーバーラップ慣性スクロールや、後れて動く要素
スローイン／スローアウトiOS のスプリングアニメーションや Material のイージング
アークスワイプで閉じる際のカーブや、カードを投げる動き
副次的動作視覚的なフィードバックと連動した触覚パルス
タイミングタッチへの応答は100ms未満、トランジションは250～350ms
誇張バウンスの振幅や触覚の強さ
立体感のある描画セーフエリアの尊重や一貫したアンカー
魅力最低60fpsとジェスチャーの連続性

原則の適用

伸縮：スクロール端にラバーバンド効果を実装します。引っ張って更新する動作では、コンテンツを自然に伸ばします。ボタンはタッチ時に押し縮めます。

予備動作：長押しすると、本来の操作を実行する前にプレビューを表示します。ドラッグのしきい値に達する前に視覚的なヒントを表示し、項目が持ち上がることを示します。スワイプ時には、遷移先コンテンツの端を見せます。

演出：シート表示を使ってコンテキストを維持します。モーダルにフォーカスしている間は、背景を暗くし、縮小します。ヒーロートランジションでビュー同士を意味のある形でつなぎます。

ストレート・アヘッドとポーズ・トゥ・ポーズ：ドラッグやピンチなど、ジェスチャーに追従するアニメーションはストレート・アヘッドで、タッチ入力によって動きます。プッシュや表示などのシステムトランジションはポーズ・トゥ・ポーズで、あらかじめ定義されたキーフレームを使います。

後追いとオーバーラップ：指を離した後も、コンテンツは慣性で動き続けます。ナビゲーションバーの要素は、メインコンテンツの後にわずかにアニメーションします。リスト項目は段階的に収まります。

スローイン／スローアウト：iOS はスプリング物理を使用します。質量、剛性、減衰を設定します。Android Material は標準のイージングである FastOutSlowIn を使用します。ユーザー操作で開始する動きに、リニアは使わないでください。

アーク：投げられたカードは放物線を描きます。スワイプで閉じる際のカーブは、速度ベクトルに基づきます。FAB の展開と折りたたみには、自然な弧の軌跡を使います。

副次的動作：触覚フィードバックと視覚的な反応を組み合わせます。ボタンを押すと、リップルエフェクトが発生します。成功を示すチェックマークに合わせて、軽い触覚フィードバックを発生させます。

タイミング：タッチの応答は100ms未満にします。クイックアクションは150～250ms、ビューのトランジションは250～350ms、複雑なアニメーションは350～500msにします。触覚フィードバックは視覚的な動きと正確に同期させます。

誇張：引っ張って更新する動作では、フィードバックがはっきり伝わるよう、自然な範囲を超えて伸ばします。エラー時のシェイクは明確にします。成功アニメーションは、適切に達成感を演出します。

立体感のある描画：アニメーション中も、デバイスのセーフエリアを尊重します。変形の原点を一貫させます。動きの経路では、ノッチや Dynamic Island を考慮します。

魅力：最低60fpsを確保し、ProMotionディスプレイでは120fpsを目指します。ジェスチャー駆動のアニメーションは、指とつながっているように感じられる必要があります。アニメーションを中断できることも不可欠です。

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

iOS
// Spring animation with follow-through
UIView.animate(withDuration: 0.5,
               delay: 0,
               usingSpringWithDamping: 0.7,
               initialSpringVelocity: 0.5,
               options: .curveEaseOut)

// Haptic pairing
let feedback = UIImpactFeedbackGenerator(style: .medium)
feedback.impactOccurred()
Android
// Material spring animation
SpringAnimation(view, DynamicAnimation.TRANSLATION_Y)
    .setSpring(SpringForce()
        .setStiffness(SpringForce.STIFFNESS_MEDIUM)
        .setDampingRatio(SpringForce.DAMPING_RATIO_MEDIUM_BOUNCY))
    .start()

触覚フィードバックのガイドライン

操作iOSAndroid
選択.selectionEFFECT_TICK
成功.successEFFECT_CLICK
警告.warningEFFECT_DOUBLE_CLICK
エラー.errorEFFECT_HEAVY_CLICK

触覚フィードバックは副次的な動作です。必ず視覚的な確認と組み合わせてください。

コメント

Markdown 対応