用途:在明确要求 Apple 风格时,为 Web 界面提供交互与视觉规范参考,把 WWDC 设计理念落到 CSS、Pointer Events 和 Web 动效库上。若只是通用动效需求,应改用更窄的 motion 技能。
主要能力:强调即时响应(在 pointerdown 而非释放时反馈)、1:1 直接操控、可中断与可反向的动画、用弹簧替代固定时长动画、速度交接与动量投影、空间一致性、橡皮筋边界、手势细节、帧级平滑、半透明材质与深度、多模态反馈、减少动效与无障碍、字体光学尺寸与字距行高,以及八项设计基础。
使用方式:资料给出若干代码片段,例如按钮按下反馈 .button:active { transform: scale(0.97); transition: transform 100ms ease-out; };用 setPointerCapture 保持拖拽跟踪;用 Motion 的 animate(el, { y: 0 }, { type: 'spring', bounce: 0, duration: 0.4 }) 实现临界阻尼;用 project 函数做动量投影;用 backdrop-filter 实现工具栏材质;用 prefers-reduced-motion 等媒体查询做无障碍降级。
适用场景:需要 Apple 式流体手势、弹簧动效、半透明层级和平台化交互的 Web 界面。
限制:资料未提供安装命令、收费、价格、平台支持或效果数据;部分内容在原文末尾被截断,八项设计原则未完整展开。