SuperAPI AI 工具集

motion

前端与建站

查看项目

更新于 10-16 15:05

技能介绍

Motion Vue(motion-v)是一个用于 Vue 3 和 Nuxt 的动画库,当前稳定版本为 motion-v 1.x,是 Motion(原 Framer Motion)的 Vue 移植版本。它提供生产可用、硬件加速的动画,并强调较小的打包体积。

用途方面,Motion Vue 适用于以下场景:简单声明式动画(淡入、滑动、缩放);基于手势的交互(悬停、点按、拖拽);滚动联动动画;布局动画与共享元素过渡;弹簧物理动画。资料同时给出替代方案参考:如需复杂时间轴、SVG 变形、滚动触发序列,可考虑 GSAP;如需更简单 API、更少功能与更小打包体积,可考虑 @vueuse/motion;如只需无需 JS 的简单过渡,可使用 CSS 动画。

主要能力方面,该资料说明它是一份渐进式参考:基础约 200 token,每个子文件约 500-1500 token,可按需加载与当前任务相关的文件,不建议一次性加载全部文件。核心概念包括 Motion 组件(可为任意 HTML/SVG 元素添加动画能力)、手势动画与滚动动画。

使用方式方面,Vue 3 安装命令为 pnpm add motion-v。Nuxt 3 安装命令为 pnpm add motion-v @vueuse/nuxt,并在 nuxt.config.ts 中把 'motion-v/nuxt' 加入 modules。示例代码方面,Motion 组件用法为在 script setup 中 import { motion } from 'motion-v',然后在模板中为 motion.div 传入 initial、animate、exit、transition 等属性;手势动画示例为在 motion.button 上使用 whileHover、whilePress 与 spring 类型的 transition;滚动动画示例为在 motion.div 上使用 initial、whileInView 与 viewport(如 once、margin)属性。

参考资料文件方面,涉及 Motion 组件、手势或布局动画时可加载 references/components.md;涉及 useMotionValue、useScroll、useSpring 或 animate() 时可加载 references/composables.md;寻找动画模式或思路时可加载 references/examples.md。

限制方面,资料提示不要一次加载全部参考文件,应只加载与当前任务相关的内容。关于收费、价格、平台支持范围或具体效果指标,资料未提供,暂未提供。