Apple Design — Motion（动画 · 手势 · 反馈）
如何让界面像 Apple 一样充满活力：弹簧驱动、可中断、响应及时。
何时使用
添加任何转场、动画、手势，或按压/加载反馈时。
让网页动效呈现“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 →“连续滚动进度动效（活力原语）”：mapRange + 阻尼滚动 rAF lerp（平滑读取，不做滚动劫持）、可逆/多速率绑定、@supports (animation-timeline) CSS 路径、减少动效
- references/motion-animation.md →“指针响应动效（桌面端增强）”：磁性按钮/倾斜/聚光灯的原生实现配方、pointer:fine + reduced-motion 的硬性门槛、单次 rAF 帧的生产注意事项
- references/gestures-interaction.md：手势词汇、滑动关闭、上下文菜单、灵动岛、JS 指针实现配方
- references/microinteractions-feedback.md：触觉目录与触发时机、控件状态、加载模式、iOS 网页触觉的缺口
常见错误
- 到处用 ease/linear；动画过长、不可中断、阻塞输入。
- 动画 width/top/height 而非 transform；忽略 reduced-motion。
- 没有点击反馈；触觉滥用/重复触发；误以为 Web 振动在 iOS 上可用。
相关：移动的玻璃 → apple-design-materials · 滚动驱动的网页动效 → apple-design-web · 将减少动效作为无障碍 → apple-design-tactics。
本技能拥有上述可复用的滚动/指针引擎原语。基于它们构建的页面级滚动组合——主题/背景变形、粘性堆叠卡片、画布擦洗式 hero——位于 apple-design-web。表面轴决策（某个表面是否应承诺连续动效）位于 apple-design 的 restraint-and-antislop.md。