核心概念
Popmotion 是一個低階 JavaScript 動畫函式庫，以「library behind the library」定位著稱——它是 Framer Motion 的底層引擎，開發者可直接使用，也可以作為構建高階動畫框架的基礎。
三種核心動畫類型
| 類型 | 說明 | 參數 |
|---|---|---|
| Keyframes | 預設類型，定義起點到終點或多段關鍵幀序列 | from、to、times、緩動函數 |
| Spring | 物理模擬彈簧動畫，產生自然彈性感 | stiffness（剛度）、damping（阻尼）、mass（質量）、velocity |
| Inertia / Decay | 模擬慣性衰減，常見於滾動慣性效果 | velocity、power、timeConstant |
核心 API
// 基礎 keyframe 動畫
animate({ from: 0, to: 100, onUpdate: v => element.style.opacity = v })
// Spring 動畫（彈性效果）
animate({
from: 0, to: 500,
type: "spring",
stiffness: 500, damping: 30, mass: 1,
onUpdate: v => element.style.x = v
})
// 多段關鍵幀
animate({
to: [0, 100, 0],
duration: 1000,
onUpdate: v => console.log(v)
})
支援的數值類型
Popmotion 可動畫化三種資料類型：
- 數字：位移、透明度、縮放比例
- 顏色：RGB、HSL、十六進制格式，透過
mixColor處理 - 複雜字串：
box-shadow、border-radius、SVG 路徑等 CSS 複合值
輔助工具集
- 幾何運算：
angle、distance、pointFromVector - 插值：
interpolate、mix、mixComplex - 約束工具：
clamp、snap、wrap - 函數組合：
pipe
關鍵要點
- 輕量：
animate函數僅約 4.5kb，每個函數可單獨 import，不需引入整個函式庫 - Framer Motion 底層引擎：Framer Motion 建構在 Popmotion 之上，若需要更低階控制可直接使用 Popmotion
- TypeScript 原生：完全以 TypeScript 撰寫，95% 以上測試覆蓋率，生產環境穩定性高
- 智能類型偵測：
animate()函數會自動偵測動畫類型（數字 vs 顏色 vs 複雜字串），減少設定負擔 - Spring 參數調整邏輯：
stiffness越高動畫越快速，damping越低彈跳感越強，mass增加會讓動畫感覺更「重」 - 無 DOM 依賴：可在任何接受數字輸入的 API 上使用，不限於瀏覽器環境
實務應用
何時選擇 Popmotion 而非高階庫
- 需要完全自訂動畫邏輯，不想受框架限制
- 構建自己的動畫系統或元件庫
- 需要在非 React 環境中使用物理動畫（Framer Motion 限定 React）
- 對 bundle size 敏感，只需要特定動畫功能
與競品定位比較
| 庫 | 定位 | bundle size | 學習曲線 |
|---|---|---|---|
| GSAP | 功能最完整、商業授權 | 較大 | 中等 |
| Anime.js | 入門友善、文件豐富 | 小 | 低 |
| Popmotion | 低階、可組合、TypeScript | ~4.5kb | 中等 |
| Framer Motion | React 高階封裝（底層用 Popmotion） | 較大 | 低 |
典型場景
- Hover 互動效果與 UI 微動畫
- 頁面轉場動畫
- 模擬智慧型手機滾動慣性（
inertia） - SVG 路徑或複雜 CSS 值的動畫插值
延伸觀點
根據三篇跨來源文章的交叉驗證，有幾個在官方文件中較少強調的觀點值得注意：
「低階即彈性」的設計哲學
Popmotion 刻意維持低階設計，不封裝 DOM 操作，而是只輸出計算後的數值（透過 onUpdate 回調）。這讓它能接入任何渲染層——Canvas、WebGL、Three.js、甚至 Web Audio API——而不只是 CSS 動畫。兩篇文章均強調此特性，是與 Anime.js、GSAP 最根本的設計差異。
Framer Motion 關係的實際意義
Popmotion 作為 Framer Motion 底層引擎這一點，在多篇文章中被共同提及。實務意義是：若你已在用 Framer Motion 但遇到無法繞過的限制，可以降層到 Popmotion 直接使用相同的物理動畫計算邏輯，而無需引入不同生態系的庫。
Spring 動畫的效能盲點
收集的資料中普遍缺乏效能基準，值得注意：Spring 動畫是物理模擬，不像 CSS transition 可以 GPU 加速，高頻率更新（60fps）下複雜場景需要手動控制更新範圍或搭配 will-change 提示，避免主線程過載。