用途
apple-design 是一份面向 Web 平台的界面设计与动效指南，把 Apple 在 WWDC 设计演讲（主要是《Designing Fluid Interfaces》，WWDC 2018，另涉及《Designing Audio-Haptic Experiences》与《The Details of UI Typography》，WWDC 2020）中阐述的理念，翻译并落到 CSS、Pointer Events、requestAnimationFrame 以及 Motion、Framer Motion 等弹簧动画库上。它适合在构建或评审手势驱动界面、弹簧动画、抽屉、拖拽、滑动、回弹等交互时参考。
其核心主张是：当动效从屏幕上的当前值出发、继承用户速度、向前预测动量，并且能在任意瞬间被抓住并反向时，界面才会显得“有生命”。弹簧之所以成为核心工具，是因为它天然可被打断并能感知速度。
主要能力（原则要点）
- 响应：在 pointer-down 时即给出反馈，而非等待释放；警惕防抖、人为计时器、过渡等待与约 300ms 的点击延迟；交互过程中的反馈必须连续。
- 直接操控：拖拽时内容应与手指贴合，并尊重抓取点的偏移；使用 Pointer Events 与 setPointerCapture；记录短时速度/位置历史。
- 可中断性：任何动画都可随时被打断与重定向；不要锁定输入；始终从当前呈现值开始动画；手势驱动场景避免使用 CSS transition 与 @keyframes；反向时平滑混合速度；二维运动拆分为独立的 X、Y 弹簧。
- 以行为替代动画，使用弹簧：用阻尼比控制过冲，用响应时间控制到达目标的快慢；默认阻尼 1.0，仅在有动量来源（快速滑动、抛掷、拖拽释放）时加入约 0.8 的弹跳；文中给出移动/旋转/抽屉的具体阻尼与响应取值。
- 速度交接：手势结束时，动画应以手指的精确速度继续。
- 动量预测：用速度预测静止位置，再吸附到最近的吸附点，文中给出 Apple 的投影函数（指数衰减形式）。
- 空间一致性：进出路径对称；交互锚定到触发源；可逆过渡的缓动要镜像。
- 手势方向暗示、橡皮筋边界、手势设计细节（点击、拖拽/滑动、并行识别、消歧延迟）。
- 逐帧流畅度：控制每帧位移低于感知阈值；快速运动可加入轻微运动模糊；只动画 transform 与 opacity，并用 will-change 提示。
- 材质与层级：用 backdrop-filter 近似半透明材质；材质重量表达层级；以变暗聚焦、以分离保持流程；活力感保证文字可读；用滚动边缘效果代替硬分割线；玻璃/模糊表面应“材质化”而非单纯淡入。
- 多模态反馈：因果、和谐、效用三原则，视觉、声音与触觉需同帧触发。
- 减弱动效与无障碍：响应 prefers-reduced-motion、prefers-reduced-transparency、prefers-contrast 三种信号，并避免全屏移动背景、慢速循环振荡与突兀亮度跳变。
- 字体排版：字距随字号变化、行高与字号反向、用字重与字号和行高共同构建层级、尊重用户字号设置、优先使用系统字体。
使用方式
资料以原则加代码片段的形式呈现，示例包括 CSS 按下态反馈、Pointer Events 处理、Motion 的弹簧调用、动量投影函数、橡皮筋函数、毛玻璃工具栏样式以及 reduced-motion 媒体查询。资料未提供该技能的安装命令、依赖声明或集成步骤。
适用场景
- 构建或评审手势驱动的 UI。
- 实现弹簧动画、可中断的拖拽与滑动交互。
- 设计抽屉、底部弹层、轮播等带吸附与动量效果的组件。
- 处理减弱动态效果、减弱透明度与高对比度等无障碍偏好。
- 调整界面字体排版与毛玻璃材质层级。
限制
资料未提供安装方式、运行环境要求、浏览器兼容性细节、性能实测数据、收费与价格信息，也未提供完整的组件库或可运行的完整示例。所有示例均以说明原则为目的，具体实现需自行判断适配。