全新的動畫神器！3 行代碼搞定所有動效！支持 Vue、React、JS
Hello，大家好，我是 Sunday
在前端項目中做動畫，一直是很多同學非常頭疼的一件事。
為啥呢？
一是不熟悉、二是寫起來非常麻煩。哪怕你引入了很多動畫庫（如：GSAP）寫起來依然非常的麻煩。
因此，咱們都迫切希望有一個 使用簡單、功能強大 的動畫庫。
那么，現在有了！它就是 Motion。
圖片
它基于瀏覽器原生的 Web Animations API 構建，擁有極高性能和零依賴特性。
更重要的是，它的思路徹底告別了傳統的 CSS 類名動畫，不需要 維護一堆 .enter-active、.leave-to，只需要在組件上寫一個配置對象，就能完成復雜動效。
圖片
是不是和其他的動畫庫大有不同呀。那么下面咱們就一起來看看這個庫的核心價值與應用方案。
傳統 CSS 動畫存在的問題
最傳統的動畫方案自然是 CSS 動畫了。
通常咱們去寫 CSS 動畫時，都通過 transition 或 @keyframes 實現過渡，比如：
// push頁面時：新頁面的進入動畫
.push-enter-active {
animation-name: push-in;
animation-duration: 0.4s;
}
// push頁面時：老頁面的退出動畫
.push-leave-active {
animation-name: push-out;
animation-duration: 0.4s;
}
// push頁面時：新頁面的進入動畫
@keyframes push-in {
0% {
transform: translate(100%, 0);
}
100% {
transform: translate(0, 0);
}
}但是這樣實現會遇到很多的問題。
首先就是：動畫邏輯和業務狀態分離，不易維護。并且復雜動畫需要多個類名、多個狀態切換，動畫完成后無法輕易做事件回調。
因此，很多同學更加會通過 JS 來控制動畫。比如：requestAnimationFrame、Anime.js、GSAP 等等的。
但是，JS 也有新的問題。比如：不同的框架集成方式，有的適配 Vue、有的適配 React。單獨適配 JS 的庫，放到不同的框架中寫法兼容上又不是太好。
所以，JS 完成動畫雖然功能強大，但是這些方案都局限于各自生態，局限性還是很大的。
Motion 的價值是什么？
既然 CSS 方案維護麻煩，JS 動畫又各自為政，那有沒有一種方式，能同時兼顧性能、易用性、與跨框架兼容性？
這就是 Motion 的意義所在啦。
Motion 的核心價值，其實可以用三個詞來概括：統一（Unified）、高性能（Performant）、聲明式（Declarative）
1. 統一
Motion 最大的優勢，就是它完全基于瀏覽器原生的 Web Animations API 構建。
這意味著：你寫的動畫邏輯，可以不依賴任何框架。
場景 | 用法 |
Vue3 |
|
React |
|
原生 JS |
|
同一套語法，跨框架可用。 這也是它比 GSAP、Anime.js 更“現代”的地方： 不需要適配層、不需要封裝 Hook 或指令。
2. 高性能
Motion 并不是在 JS 層模擬動畫，而是直接使用瀏覽器內置的 Web Animations API。
這帶來了兩個核心優勢：
- 更流暢的性能表現：：由瀏覽器底層接管動畫幀率控制，可自動利用 GPU 加速；
- 更低的計算開銷：JS 主線程無需持續執行動畫邏輯，動畫不會被業務邏輯阻塞。
換句話說，即便在動畫播放時執行大量渲染任務，Motion 依然能保持穩定幀率。
3. 聲明式
傳統動畫是“命令式”的，你需要告訴瀏覽器每一幀該怎么動。
但是Motion 的思路完全相反：你只需要描述 初始狀態（initial） 和 目標狀態（animate）（有點類似于補間動畫），剩下的交給引擎自動計算。
舉個最簡單的例子：
<template>
<motion.div
:initial="{ opacity: 0, y: 50 }"
:animate="{ opacity: 1, y: 0 }"
>
Hello Sunday!
</motion.div>
</template>三行代碼，就能實現一個優雅的“淡入上升”動畫。無需定義類名、無需監聽過渡事件、也無需寫 @keyframes。
如何使用 Motion
Motion 的安裝和使用也非常簡單。 根據你使用的框架選擇對應包即可。
# Vue 版本
npm install motion-v
# React 版本
npm install motion
# 原生 JS 版本
npm install motion然后在項目中引入即可：
Vue 示例：
<script setup>
import { Motion } from 'motion-v'
</script>
<template>
<Motion.div
:initial="{ opacity: 0, scale: 0.9 }"
:animate="{ opacity: 1, scale: 1 }"
:transition="{ duration: 0.6, easing: 'ease-out' }"
>
動畫出現了
</Motion.div>
</template>React 示例：
import { motion } from "motion/react"
export default function Demo() {
return (
<motion.div
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.6, easing: "ease-out" }}
>
動畫出現了
</motion.div>
)
}是不是非常優雅？ 所有動畫都可以直接通過屬性控制，不需要定義類名，也不需要管理生命周期。
MotionPlus
如果你的項目需要更高級的動畫功能，Motion 還提供了付費版本：MotionPlus。
它在社區版的基礎上增加了：
- 更豐富的預制動效庫；
- 可視化曲線與時間軸編輯器；
- 多場景聯動動畫（如滾動、拖拽、分布式動效）；
- 商業級性能優化與支持。
適合對動畫精度要求極高的團隊、設計驅動型項目或視覺類產品。
一個小總結
特別是在 To C 的業務中，現在這么卷，動畫幾乎是少不的。
但是對于很多同學來說，寫動畫又很麻煩。因此 Motion 的出現，對于很多同學來說，是個好事。
無論你寫的是 Vue、React，還是純 JavaScript，Motion 都能以相同的語法結構，讓寫動畫的代碼變得更加簡單。
