今年 1 月，尤雨溪在推特上亲自安利了一款「Vue 专属动画库」——Motion Vue。
它基于 Framer Motion 的语法，让 Vue 3 开发者也能写出丝滑、高性能的动画。
然而官网长期缺案例、少更新，一度被贴上“可能烂尾”的标签。
就在大家快要遗忘之际，Motion 官方突然放了个大招：
正式把 Vue 纳入第一梯队，与 React、JavaScript 并列，成为官方支持的三大平台之一；
并且把原来只在 React 生态才有的 100+ 经典动效示例，几乎 1:1 迁移到了 Vue 端！
除此之外，官方还补齐了「开发者工具链」——VS Code 可视化编辑器、LLM 文档、AI 生成 CSS 弹性曲线……一次性打包奉上。
Motion 官方支持平台一览
- ✅ JavaScript
- ✅ React
- ✅ Vue 3（新增）
你还可以在
Framer、Figma、Squarespace、WordPress、Webflow等平台通过官方指南直接调用Motion。
100+ 动效组件速览（Vue 已可用）
- Fade In / Out
最经典的淡入淡出，一行:initial+:animate就能启动。
- Cursor
是一个为 Vue 打造的创意光标组件。借助它，你可以快速、轻松地构建自定义光标或跟随鼠标的动画效果。
- Transform
创建一个运动值，它将一个或多个运动值的输出进行转换后作为新的结果。
-
Ticker
Ticker让你能够快速、轻松地构建无限滚动的跑马灯式动画。 -
Typewriter
打字机效果，可配合splitText拆字爆炸。
- Progress
进度条加载动画。
更多优秀动画案例请移步官网：
https://examples.motion.dev/vue
开发工具链「三连击」
-
VS Code 插件
拖拽调曲线、实时预览、AI 生成弹簧，动画调试从未如此直观。
-
LLM 友好文档
Cursor/Claude/Windsurf直接@motion，API 永不落后。文档：
https://llms.motion.dev -
Vibe Coding
Framer、Figma、v0已内置 Motion 模板，设计师拖拽 → 开发者导出Vue。文档：
https://motion.dev/docs/tools-quick-start
30 秒上手
npm i motion-v
<motion.div
:initial="{ backgroundColor: 'rgb(0, 255, 0)', opacity: 0 }"
:whileInView="{ backgroundColor: 'rgb(255, 0, 0)', opacity: 1 }"
/>
Vue 3 动效生态再添一员猛将
| 库 | 特点 | 推荐指数 |
|---|---|---|
| Motion Vue | 官方支持、100+ 示例、AI 工具链 | ⭐⭐⭐⭐⭐ |
| GSAP | 老牌全能、复杂时间轴 | ⭐⭐⭐⭐ |
| Anime.js | 轻量、易上手 | ⭐⭐⭐ |
| Inspira UI | 纯 Vue 组件、开箱即用 | ⭐⭐⭐⭐ |
| Uiverse.io | 社区模板丰富 | ⭐⭐⭐ |
完整 10 款 Vue3 动效库横向对比，可戳下方原文
Vue3 生态：10 个最强大的动效组件库！
写在最后
从**「可能烂尾」到「官方亲儿子」**，Motion Vue 只用了一次大更新。
组件全、性能好、工具链完善，还有尤雨溪背书——Vue 3 动画选型，真的可以把它放进第一梯队了。
立即体验
- 文档 + 100+ 示例：
https://examples.motion.dev/vue - GitHub 仓库：
https://github.com/motiondivision/motion
