mobile-touch

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Mobile Touch Animation

移动触摸动画

Apply Disney's 12 animation principles to mobile gestures, haptics, and native app motion.

将迪士尼的12条动画原则应用于移动手势、触觉反馈和原生应用动效中。

Quick Reference

快速参考

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	橡皮筋效果、滚动边界回弹
Anticipation	预览后再展示、长按预览
Staging	表单式呈现、焦点状态
Straight Ahead / Pose to Pose	手势驱动 vs 预设过渡
Follow Through / Overlapping	惯性滚动、尾随元素动效
Slow In / Slow Out	iOS弹簧动画、Material缓动效果
Arc	滑动关闭曲线、卡片抛掷轨迹
Secondary Action	触觉脉冲搭配视觉反馈
Timing	触摸响应<100ms、过渡动画250-350ms
Exaggeration	回弹幅度、触觉强度
Solid Drawing	遵循安全区域、锚点一致
Appeal	最低60fps、手势连贯性

Principle Applications

原则应用

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.

Squash & Stretch：在滚动边界实现橡皮筋效果。下拉刷新时应让内容自然拉伸。按钮在触摸时产生压缩效果。

Anticipation：长按操作先显示预览再执行完整动作。拖动阈值在元素抬起前提供视觉提示。滑动操作显示目标内容的边缘。

Staging：使用表单式呈现来维持上下文。模态框聚焦时调暗并缩放背景。Hero过渡动画有意义地连接不同视图。

Straight Ahead vs Pose to Pose：跟随手势的动画（拖动、捏合）属于Straight Ahead类型——由触摸输入驱动。系统过渡动画（推送、呈现）属于Pose to Pose类型——预定义关键帧。

Follow Through & Overlapping：手指抬起后内容继续移动（惯性）。导航栏元素在主内容动画后稍作延迟再动效。列表项依次错开完成定位。

Slow In / Slow Out：iOS使用弹簧物理特性——可配置质量、刚度、阻尼。Android Material使用标准缓动：

FastOutSlowIn

。用户触发的动效绝不要使用线性缓动。

Arc：抛掷的卡片遵循抛物线轨迹。滑动关闭的曲线基于速度向量。FAB展开/收起遵循自然弧形路径。

Secondary Action：将触觉反馈与视觉响应配对。按钮按下时伴随波纹效果。成功勾选标记触发轻微触觉反馈。

Timing：触摸响应：<100ms。快速操作：150-250ms。视图过渡：250-350ms。复杂动画：350-500ms。触觉反馈必须与视觉效果精确同步。

Exaggeration：下拉刷新时内容超出自然范围拉伸——让反馈更清晰。错误提示的抖动效果更明显。成功动画要有适当的庆祝感。

Solid Drawing：动画过程中遵循设备安全区域。保持一致的变换原点。动效路径需考虑刘海屏/灵动岛。

Appeal：最低60fps，ProMotion显示屏目标120fps。手势驱动的动画必须与手指操作紧密关联。可中断的动画至关重要。

Platform Patterns

平台模式

iOS

swift

// 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()

swift

// 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

kotlin

// Material spring animation
SpringAnimation(view, DynamicAnimation.TRANSLATION_Y)
    .setSpring(SpringForce()
        .setStiffness(SpringForce.STIFFNESS_MEDIUM)
        .setDampingRatio(SpringForce.DAMPING_RATIO_MEDIUM_BOUNCY))
    .start()

kotlin

// Material spring animation
SpringAnimation(view, DynamicAnimation.TRANSLATION_Y)
    .setSpring(SpringForce()
        .setStiffness(SpringForce.STIFFNESS_MEDIUM)
        .setDampingRatio(SpringForce.DAMPING_RATIO_MEDIUM_BOUNCY))
    .start()

Haptic Guidelines

触觉反馈指南

Action	iOS	Android
Selection	`.selection`	`EFFECT_TICK`
Success	`.success`	`EFFECT_CLICK`
Warning	`.warning`	`EFFECT_DOUBLE_CLICK`
Error	`.error`	`EFFECT_HEAVY_CLICK`

Haptics are secondary action—always pair with visual confirmation.

操作	iOS	Android
选择	`.selection`	`EFFECT_TICK`
成功	`.success`	`EFFECT_CLICK`
警告	`.warning`	`EFFECT_DOUBLE_CLICK`
错误	`.error`	`EFFECT_HEAVY_CLICK`

触觉反馈是辅助操作——始终要搭配视觉确认。