关于 mobile-touch
mobile-touch 是面向移动应用设计的动画技能，将迪士尼 12 条动画原则应用于触控手势、触觉反馈和原生动效，并提供 iOS 与 Android 模式参考。
主要功能
- 01将动画原则用于移动手势
- 02触觉与视觉反馈配对
- 03提供动效时长参考
- 04涵盖 iOS 和 Android 模式
适用场景
- 01设计滚动边界的回弹效果
- 02规划长按预览与滑动关闭
- 03同步触觉反馈和视觉响应
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/mobile-touch确认已加载。
详细介绍
移动触控动画
将迪士尼的 12 条动画原则应用于移动手势、触觉反馈和原生应用动效。
快速参考
| 原则 | 移动端实现方式 |
|---|---|
| 挤压与拉伸 | 橡皮筋效果、滚动到边界时的回弹 |
| 预备动作 | 显示前先露出一角、长按预览 |
| 舞台呈现 | 工作表式呈现、焦点状态 |
| 连续动作 / 关键帧动作 | 手势驱动的过渡 vs 预设过渡 |
| 跟随动作 / 重叠动作 | 惯性滚动、滞后元素 |
| 缓入 / 缓出 | iOS 弹簧动画、Material 缓动 |
| 弧线 | 滑动关闭曲线、卡片抛掷 |
| 次要动作 | 触觉脉冲与视觉反馈同步 |
| 时间 | 触控响应 <100ms，过渡 250-350ms |
| 夸张 | 回弹幅度、触觉强度 |
| 扎实绘制 | 遵守安全区域、保持锚点一致 |
| 吸引力 | 最低 60fps、手势连贯性 |
原则应用
挤压与拉伸：在滚动边界实现橡皮筋效果。下拉刷新时，内容应自然拉伸。按下按钮时，按钮会压缩。
预备动作：长按时先显示预览，再执行完整操作。拖动阈值可在项目抬起前提供视觉提示。滑动时显示目标内容的边缘。
舞台呈现：使用工作表式呈现来保留上下文。模态界面获得焦点时，将背景调暗并缩小。通过有意义的 Hero 过渡连接视图。
连续动作 vs 关键帧动作：跟随手势的动画（拖动、捏合）属于连续动作，由触控输入驱动。系统过渡（推入、呈现）属于关键帧动作，使用预定义关键帧。
跟随动作与重叠动作：手指抬起后，内容继续移动（惯性）。导航栏元素在主要内容之后稍作动画。列表项以交错方式稳定下来。
缓入 / 缓出：iOS 使用弹簧物理效果，可配置质量、刚度和阻尼。Android Material 使用标准缓动：FastOutSlowIn。用户触发的动效切勿使用线性缓动。
弧线：被抛出的卡片沿抛物线运动。滑动关闭的曲线基于速度向量。FAB 展开 / 收起时沿自然弧线路径运动。
次要动作：将触觉反馈与视觉响应配对。按下按钮时同步出现涟漪效果。成功勾选标记触发轻微触觉反馈。
时间：触控确认：<100ms。快速操作：150-250ms。视图过渡：250-350ms。复杂动画：350-500ms。触觉反馈应与视觉效果精确同步。
夸张：下拉刷新时的拉伸幅度应超出自然范围，让反馈更加清晰。错误抖动应明显。成功动画应适度营造庆祝感。
扎实绘制：动画期间遵守设备安全区域。保持变换原点一致。在运动路径中考虑刘海 / 动态岛。
吸引力：最低 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()
触觉指南
| 操作 | iOS | Android |
|---|---|---|
| 选择 | .selection | EFFECT_TICK |
| 成功 | .success | EFFECT_CLICK |
| 警告 | .warning | EFFECT_DOUBLE_CLICK |
| 错误 | .error | EFFECT_HEAVY_CLICK |
触觉反馈属于次要动作——始终配合视觉确认。