用途:将 Apple 的界面设计理念(主要来自 WWDC 2018《Designing Fluid Interfaces》等设计演讲)翻译为 Web 平台实现(CSS、Pointer Events、requestAnimationFrame、Motion/Framer Motion 等弹簧库),用于构建或审查手势驱动的界面。首次调用且无具体问题时,仅回复一句就绪说明,不主动展开其他内容。
主要能力(核心原则):
- 响应:在 pointerdown 而非释放时给出反馈,消除输入路径上的延迟与人为定时器。
- 直接操纵:拖拽与指针 1:1 跟踪,尊重抓取偏移,使用 setPointerCapture。
- 可打断:动画时刻可被抓住并反向,从当前呈现值而非目标值起算,速度需混合而非硬切。
- 弹簧驱动:以阻尼比与响应时间两个参数描述,交互默认阻尼 1.0,仅有惯性时用约 0.8 反弹。
- 速度交接:手势结束时把释放速度作为弹簧初速度传入。
- 惯性投影:用 Apple 的指数衰减投影函数选址,再吸附到最近目标点。
- 空间一致性:进出路径对称,锚定触发源。
- 方向提示、9. 橡皮筋软边界(附 rubberband 函数)、10. 手势设计细节(点击、拖拽、并行识别、去歧义延迟)、11. 帧级平滑、12. 材质与层次(backdrop-filter 等)、13. 动效+声音+触觉的多模态反馈、14. 减弱动效与无障碍(prefers-reduced-motion 等)、15. 字体排版(随字号调整字距与行距、支持动态字体)。
使用方式:该条目为技能说明,未提供安装命令或具体调用步骤,暂未提供。文中的代码片段(如 project 投影函数、rubberband 函数、Motion 的 animate 调用)为原则示例。
适用场景:手势驱动 UI、弹簧动画、底部抽屉、轮播、拖拽排序、粘性工具栏与玻璃材质界面等。
限制:资料说明弹簧库可选用 Motion/Framer Motion,但未指定绑定版本;不同框架的 velocity 参数接受绝对值或相对值需自行确认;除上述设计原则外,具体性能指标、兼容范围与限制未提供。