mobile-touch by dylantarre/animation-principles
npx skills add https://github.com/dylantarre/animation-principles --skill mobile-touch将迪士尼的 12 条动画原理应用于移动端手势、触觉反馈和原生应用动效。
| 原理 | 移动端实现 |
|---|---|
| 挤压与拉伸 | 橡皮筋效果,滚动边界回弹 |
| 预备动作 | 揭示前预览,长按预览 |
| 演出布局 | 底部表单呈现,聚焦状态 |
| 连续动作与姿态对应 | 手势驱动与预设过渡动画 |
| 跟随动作与重叠动作 | 动量滚动,跟随元素 |
| 慢入慢出 | iOS 弹簧动画,Material 缓动曲线 |
| 弧形运动 | 滑动关闭曲线,卡片投掷 |
| 次要动作 | 视觉反馈伴随触觉脉冲 |
| 节奏 | 触控响应 <100ms,过渡动画 250-350ms |
| 夸张 | 回弹幅度,触觉强度 |
| 扎实的描绘 | 尊重安全区域,一致的锚点 |
| 吸引力 | 最低 60fps,手势连续性 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
挤压与拉伸:在滚动边界实现橡皮筋效果。下拉刷新应自然地拉伸内容。按钮在触摸时压缩。
预备动作:长按在完整操作前显示预览。拖拽阈值在项目抬起前提供视觉提示。滑动显示目标内容的边缘。
演出布局:使用底部表单呈现来维持上下文。模态框聚焦时背景变暗和缩放。Hero 过渡有意义的连接视图。
连续动作与姿态对应:跟随手势的动画(拖拽、捏合)是连续动作——由触摸输入驱动。系统过渡动画(推送、呈现)是姿态对应——预定义的关键帧。
跟随动作与重叠动作:手指抬起后内容继续移动(动量)。导航栏元素在主内容之后轻微动画。列表项错落有致地稳定下来。
慢入慢出:iOS 使用弹簧物理——配置质量、刚度、阻尼。Android Material 使用标准缓动:FastOutSlowIn。用户发起的运动切勿使用线性动画。
弧形运动:投掷的卡片遵循抛物线轨迹。滑动关闭的曲线基于速度向量。FAB 展开/折叠遵循自然的弧线路径。
次要动作:将触觉反馈与视觉响应配对。按钮涟漪伴随按压。成功对勾触发轻微触觉。
节奏:触控确认:<100ms。快速操作:150-250ms。视图过渡:250-350ms。复杂动画:350-500ms。触觉应与视觉精确同步。
夸张:下拉刷新拉伸超出自然范围——使反馈清晰。错误摇动明显。成功动画适当庆祝。
扎实的描绘:动画期间尊重设备安全区域。保持一致的变换原点。在运动路径中考虑刘海屏/灵动岛。
吸引力:最低 60fps,在 ProMotion 显示屏上目标 120fps。手势驱动的动画必须感觉与手指相连。可中断的动画至关重要。
// 带跟随动作的弹簧动画
UIView.animate(withDuration: 0.5,
delay: 0,
usingSpringWithDamping: 0.7,
initialSpringVelocity: 0.5,
options: .curveEaseOut)
// 触觉配对
let feedback = UIImpactFeedbackGenerator(style: .medium)
feedback.impactOccurred()
// 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 |
触觉是次要动作——始终与视觉确认配对。
每周安装量
1.4K
代码仓库
GitHub 星标
18
首次出现
2026 年 1 月 24 日
安全审计
安装于
opencode1.1K
gemini-cli1.1K
codex1.1K
github-copilot1.1K
kimi-cli1.1K
amp1.1K
Apply Disney's 12 animation principles to mobile gestures, haptics, and native app motion.
| Principle | Mobile Implementation |
|---|---|
| Squash & Stretch | Rubber-banding, bounce on scroll limits |
| Anticipation | Peek before reveal, long-press preview |
| Staging | Sheet presentations, focus states |
| Straight Ahead / Pose to Pose | Gesture-driven vs preset transitions |
| Follow Through / Overlapping | Momentum scrolling, trailing elements |
| Slow In / Slow Out | iOS spring animations, Material easing |
| Arc | Swipe-to-dismiss curves, card throws |
| Secondary Action | Haptic pulse with visual feedback |
| Timing | Touch response <100ms, transitions 250-350ms |
| Exaggeration | Bounce amplitude, haptic intensity |
| Solid Drawing | Respect safe areas, consistent anchors |
| Appeal | 60fps minimum, gesture continuity |
Squash & Stretch: Implement rubber-band effect at scroll boundaries. Pull-to-refresh should stretch content naturally. Buttons compress on touch.
Anticipation : Long-press shows preview before full action. Drag threshold provides visual hint before item lifts. Swipe shows edge of destination content.
Staging : Use sheet presentations to maintain context. Dim and scale background during modal focus. Hero transitions connect views meaningfully.
Straight Ahead vs Pose to Pose : Gesture-following animations (drag, pinch) are straight ahead—driven by touch input. System transitions (push, present) are pose to pose—predefined keyframes.
Follow Through & Overlapping: Content continues moving after finger lifts (momentum). Navigation bar elements animate slightly after main content. Lists items settle with stagger.
Slow In / Slow Out : iOS uses spring physics—configure mass, stiffness, damping. Android Material uses standard easing: FastOutSlowIn. Never use linear for user-initiated motion.
Arc : Thrown cards follow parabolic arcs. Swipe-to-dismiss curves based on velocity vector. FAB expand/collapse follows natural arc path.
Secondary Action : Pair haptic feedback with visual response. Button ripple accompanies press. Success checkmark triggers light haptic.
Timing : Touch acknowledgment: <100ms. Quick actions: 150-250ms. View transitions: 250-350ms. Complex animations: 350-500ms. Haptic should sync precisely with visual.
Exaggeration : Pull-to-refresh stretches beyond natural—makes feedback clear. Error shake is pronounced. Success animations celebrate appropriately.
Solid Drawing : Respect device safe areas during animation. Maintain consistent transform origins. Account for notch/dynamic island in motion paths.
Appeal : Minimum 60fps, target 120fps on ProMotion displays. Gesture-driven animation must feel connected to finger. Interruptible animations essential.
// 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()
// Material spring animation
SpringAnimation(view, DynamicAnimation.TRANSLATION_Y)
.setSpring(SpringForce()
.setStiffness(SpringForce.STIFFNESS_MEDIUM)
.setDampingRatio(SpringForce.DAMPING_RATIO_MEDIUM_BOUNCY))
.start()
| Action | iOS | Android |
|---|---|---|
| Selection | .selection | EFFECT_TICK |
| Success | .success | EFFECT_CLICK |
| Warning | .warning | EFFECT_DOUBLE_CLICK |
| Error | .error |
Haptics are secondary action—always pair with visual confirmation.
Weekly Installs
1.4K
Repository
GitHub Stars
18
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode1.1K
gemini-cli1.1K
codex1.1K
github-copilot1.1K
kimi-cli1.1K
amp1.1K
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
EFFECT_HEAVY_CLICK |