SuperAPI AI 工具集

motion-physics

前端与建站

查看项目

更新于 10-23 07:34

技能介绍

用途:motion-physics 是一个面向 Vue 3 的交互动效技能,用 @vueuse/motion 的弹簧物理替代通用的淡入与滑入效果,主要处理卡片、模态框、列表项进入页面,以及卡片悬停、聚焦深度、按钮按压等反馈场景,也可用于数据列表或仪表盘面板的顺序错峰出现。

主要能力:技能提供三组预设。microFeedback 用于点击、开关与图标按钮的灵敏反馈,悬停放大到 1.02,按下缩小到 0.97,均采用弹簧过渡。modalEnter 用于面板与对话框入场,从透明度 0、缩放 0.95、向下偏移 15 过渡到完全显示。staggerItem 是列表与表格的错峰辅助函数,按索引设置延迟,单项 35ms 且总延迟上限 200ms。若三个预设都不匹配,才使用指令默认值:交互元素使用刚度 350、阻尼 25,对话框与遮罩使用刚度 280、阻尼 22。

规则约束:禁止对 x、y、缩放等空间移动使用 ease-in-out 或线性时间函数,必须使用弹簧阻尼;列表错峰延迟单项不得超过 40ms,总延迟不得超过 200ms;除显式要求的加载状态外,避免循环脉冲、无限旋转或浮动动画;需提供 prefers-reduced-motion 路径,跳过空间弹簧,改为即时透明度变化;加载指示器可以循环,其余动画只播放一次。不要对 PrimeVue 或 Quasar 已接管的布局属性(如抽屉宽度、虚拟滚动位置)做动画,除非用户明确要求。

使用方式:先执行 npm install @vueuse/motion 安装依赖,在 src/main.js 中于 PrimeVue 之后注册 MotionPlugin(引导代码位于 @primevue-aura)。预设文件位于 src/design/motion-presets.js,从该文件导入 MotionPresets,不要把数值直接复制到组件中作为一次性值使用,然后把 v-motion 绑定到与当前场景匹配的预设上。

适用场景:Vue 3 项目中的卡片、弹窗、列表与数据面板入场及交互动效,尤其适合需要统一动效规范、避免随意调参的界面开发。

限制:资料未提供浏览器兼容范围、性能指标与除 @vueuse/motion 外的其他依赖信息;预设数值固定,如需定制需另行处理。任务完成后技能建议运行 suggest_next_skill.py 脚本并附上其输出的下一步区块。