apple-design-motion

Apple Design — 动效（动画 · 手势 · 反馈）

Apple 如何让界面充满生命力：弹簧驱动、可中断、响应灵敏。

何时使用

• 添加任何过渡、动画、手势或按压/加载反馈时。
• 让 Web 动效呈现「Apple 般的流畅感」，而非套用预设缓动曲线。

核心规则

• 用弹簧而非固定缓动。 Apple 以弹簧（质量/刚度/阻尼）驱动动画，其参数化为 response + dampingFraction（或 duration + bounce）。在 Web 上，从弹簧参数生成 CSS linear() 曲线——不要默认使用 ease。
• 可中断 + 速度交接。 在 pointerdown 时即响应，让手势释放时的速度馈入弹簧，并允许飞行途中改变方向。绝不要让动画阻塞输入。
• 仅对 transform/opacity 做动画（GPU 合成）；谨慎使用 will-change。不要对布局属性做动画。
• 每个操作都要有反馈——始终提供视觉按压状态（缩放/变暗）；在可用之处提供触觉反馈。Web Vibration API 在 iOS Safari 上不起作用——绝不要依赖它来提供触感。
• 遵循 prefers-reduced-motion：提供淡入/瞬时替代方案，而非大幅位移。
• 在旗舰页面上绑定到连续的滚动进度。 在旗舰/营销页面上，将动效绑定到连续的滚动进度（带阻尼——平滑的是读取过程，绝不劫持滚动），而不仅仅是进入视口时的揭示动画。可逆、多速率的滚动进度动效，是死板模板与鲜活 Apple 页面之间最大的分水岭。

参考资料

文件	用途
references/motion-animation.md	弹簧预设 + 参数值、流体界面规则、linear() 配方、matchedGeometry/zoom
references/motion-animation.md → "Continuous scroll-progress motion (the aliveness primitive)"	mapRange + 阻尼滚动 rAF lerp（平滑读取，不劫持滚动）、可逆/多速率绑定、@supports (animation-timeline) CSS 路径、reduced-motion
references/motion-animation.md → "Pointer-reactive motion (desktop sugar)"	磁吸按钮 / 倾斜 / 聚光灯原生配方、pointer:fine + reduced-motion 硬性门槛、单次 rAF tick 的生产注意事项
references/gestures-interaction.md	手势词汇表、滑动关闭、上下文菜单、灵动岛、JS 指针配方
references/microinteractions-feedback.md	触觉目录 + 触发时机、控件状态、加载模式、iOS Web 触觉缺口

常见错误

• 到处使用 ease/linear；冗长、不可中断、阻塞输入的动画。
• 对 width/top/height 而非 transform 做动画；忽略 reduced-motion。
• 没有点击反馈；触觉滥用 / 重复触发；想当然认为 Web 振动在 iOS 上可用。

相关内容： 会移动的玻璃材质 → apple-design-materials · 滚动驱动的 Web 动效 → apple-design-web · reduce-motion 作为无障碍 → apple-design-tactics。

本技能拥有上述可复用的滚动/指针引擎原语。构建于其上的页面级滚动编排——主题/背景形变、粘性堆叠卡片、擦洗式 canvas 主视觉——位于 apple-design-web。表层轴向决策（给定表层是否应交付于连续动效）位于 apple-design 的 restraint-and-antislop.md。