Hello，大家好，我是 Sunday

在前端項(xiàng)目中做動(dòng)畫，一直是很多同學(xué)非常頭疼的一件事。

為啥呢？

一是不熟悉、二是寫起來非常麻煩。哪怕你引入了很多動(dòng)畫庫（如：GSAP）寫起來依然非常的麻煩。

因此，咱們都迫切希望有一個(gè) 使用簡單、功能強(qiáng)大 的動(dòng)畫庫。

那么，現(xiàn)在有了！它就是 Motion。

圖片

它基于瀏覽器原生的 Web Animations API 構(gòu)建，擁有極高性能和零依賴特性。

更重要的是，它的思路徹底告別了傳統(tǒng)的 CSS 類名動(dòng)畫，不需要 維護(hù)一堆 .enter-active、.leave-to，只需要在組件上寫一個(gè)配置對(duì)象，就能完成復(fù)雜動(dòng)效。

圖片

是不是和其他的動(dòng)畫庫大有不同呀。那么下面咱們就一起來看看這個(gè)庫的核心價(jià)值與應(yīng)用方案。

傳統(tǒng) CSS 動(dòng)畫存在的問題

最傳統(tǒng)的動(dòng)畫方案自然是 CSS 動(dòng)畫了。

通常咱們?nèi)?CSS 動(dòng)畫時(shí)，都通過 transition 或 @keyframes 實(shí)現(xiàn)過渡，比如：

// push頁面時(shí)：新頁面的進(jìn)入動(dòng)畫
.push-enter-active {
  animation-name: push-in;
  animation-duration: 0.4s;
}
// push頁面時(shí)：老頁面的退出動(dòng)畫
.push-leave-active {
  animation-name: push-out;
  animation-duration: 0.4s;
}
// push頁面時(shí)：新頁面的進(jìn)入動(dòng)畫
@keyframes push-in {
  0% {
    transform: translate(100%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

但是這樣實(shí)現(xiàn)會(huì)遇到很多的問題。

首先就是：動(dòng)畫邏輯和業(yè)務(wù)狀態(tài)分離，不易維護(hù)。并且復(fù)雜動(dòng)畫需要多個(gè)類名、多個(gè)狀態(tài)切換，動(dòng)畫完成后無法輕易做事件回調(diào)。

因此，很多同學(xué)更加會(huì)通過 JS 來控制動(dòng)畫。比如：requestAnimationFrame、Anime.js、GSAP 等等的。

但是，JS 也有新的問題。比如：不同的框架集成方式，有的適配 Vue、有的適配 React。單獨(dú)適配 JS 的庫，放到不同的框架中寫法兼容上又不是太好。

所以，JS 完成動(dòng)畫雖然功能強(qiáng)大，但是這些方案都局限于各自生態(tài)，局限性還是很大的。

Motion 的價(jià)值是什么？

既然 CSS 方案維護(hù)麻煩，JS 動(dòng)畫又各自為政，那有沒有一種方式，能同時(shí)兼顧性能、易用性、與跨框架兼容性？

這就是 Motion 的意義所在啦。

Motion 的核心價(jià)值，其實(shí)可以用三個(gè)詞來概括：統(tǒng)一（Unified）、高性能（Performant）、聲明式（Declarative）

1. 統(tǒng)一

Motion 最大的優(yōu)勢(shì)，就是它完全基于瀏覽器原生的 Web Animations API 構(gòu)建。

這意味著：你寫的動(dòng)畫邏輯，可以不依賴任何框架。

同一套語法，跨框架可用。 這也是它比 GSAP、Anime.js 更“現(xiàn)代”的地方： 不需要適配層、不需要封裝 Hook 或指令。

2. 高性能

Motion 并不是在 JS 層模擬動(dòng)畫，而是直接使用瀏覽器內(nèi)置的 Web Animations API。

這帶來了兩個(gè)核心優(yōu)勢(shì)：

• 更流暢的性能表現(xiàn)：：由瀏覽器底層接管動(dòng)畫幀率控制，可自動(dòng)利用 GPU 加速；
• 更低的計(jì)算開銷：JS 主線程無需持續(xù)執(zhí)行動(dòng)畫邏輯，動(dòng)畫不會(huì)被業(yè)務(wù)邏輯阻塞。

換句話說，即便在動(dòng)畫播放時(shí)執(zhí)行大量渲染任務(wù)，Motion 依然能保持穩(wěn)定幀率。

3. 聲明式

傳統(tǒng)動(dòng)畫是“命令式”的，你需要告訴瀏覽器每一幀該怎么動(dòng)。

但是Motion 的思路完全相反：你只需要描述 初始狀態(tài)（initial） 和 目標(biāo)狀態(tài)（animate）（有點(diǎn)類似于補(bǔ)間動(dòng)畫），剩下的交給引擎自動(dòng)計(jì)算。

舉個(gè)最簡單的例子：

<template>
  <motion.div 
    :initial="{ opacity: 0, y: 50 }"
    :animate="{ opacity: 1, y: 0 }"
  >
    Hello Sunday!
  </motion.div>
</template>

三行代碼，就能實(shí)現(xiàn)一個(gè)優(yōu)雅的“淡入上升”動(dòng)畫。無需定義類名、無需監(jiān)聽過渡事件、也無需寫 @keyframes。

如何使用 Motion

Motion 的安裝和使用也非常簡單。 根據(jù)你使用的框架選擇對(duì)應(yīng)包即可。

# Vue 版本
npm install motion-v

# React 版本
npm install motion

# 原生 JS 版本
npm install motion

然后在項(xiàng)目中引入即可：

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' }"
  >
    動(dòng)畫出現(xiàn)了
  </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" }}
    >
      動(dòng)畫出現(xiàn)了
    </motion.div>
  )
}

是不是非常優(yōu)雅？ 所有動(dòng)畫都可以直接通過屬性控制，不需要定義類名，也不需要管理生命周期。

MotionPlus

如果你的項(xiàng)目需要更高級(jí)的動(dòng)畫功能，Motion 還提供了付費(fèi)版本：MotionPlus。

它在社區(qū)版的基礎(chǔ)上增加了：

• 更豐富的預(yù)制動(dòng)效庫；
• 可視化曲線與時(shí)間軸編輯器；
• 多場景聯(lián)動(dòng)動(dòng)畫（如滾動(dòng)、拖拽、分布式動(dòng)效）；
• 商業(yè)級(jí)性能優(yōu)化與支持。

適合對(duì)動(dòng)畫精度要求極高的團(tuán)隊(duì)、設(shè)計(jì)驅(qū)動(dòng)型項(xiàng)目或視覺類產(chǎn)品。

一個(gè)小總結(jié)

特別是在 To C 的業(yè)務(wù)中，現(xiàn)在這么卷，動(dòng)畫幾乎是少不的。

但是對(duì)于很多同學(xué)來說，寫動(dòng)畫又很麻煩。因此 Motion 的出現(xiàn)，對(duì)于很多同學(xué)來說，是個(gè)好事。

無論你寫的是 Vue、React，還是純 JavaScript，Motion 都能以相同的語法結(jié)構(gòu)，讓寫動(dòng)畫的代碼變得更加簡單。