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:
. 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使用标准缓动:
。用户触发的动效绝不要使用线性缓动。
Arc:抛掷的卡片遵循抛物线轨迹。滑动关闭的曲线基于速度向量。FAB展开/收起遵循自然弧形路径。
Secondary Action:将触觉反馈与视觉响应配对。按钮按下时伴随波纹效果。成功勾选标记触发轻微触觉反馈。
Timing:触摸响应:<100ms。快速操作:150-250ms。视图过渡:250-350ms。复杂动画:350-500ms。触觉反馈必须与视觉效果精确同步。
Exaggeration:下拉刷新时内容超出自然范围拉伸——让反馈更清晰。错误提示的抖动效果更明显。成功动画要有适当的庆祝感。
Solid Drawing:动画过程中遵循设备安全区域。保持一致的变换原点。动效路径需考虑刘海屏/灵动岛。
Appeal:最低60fps,ProMotion显示屏目标120fps。手势驱动的动画必须与手指操作紧密关联。可中断的动画至关重要。