Remotion LabRemotion Lab
›工具›第三方套件整合

第三方套件整合

了解如何在 Remotion 中整合各種第三方動畫與 UI 函式庫，包括 After Effects、Anime.js、CSS 動畫、GreenSock、Lottie、Three.js 等工具的使用方式。

在 Remotion 中，所有動畫都必須由 useCurrentFrame() hook 回傳的幀數值來驅動。如果你想在 Remotion 中使用其他動畫方式，就需要一個能夠與 Remotion 的時間同步的整合方案。

本頁維護了針對常見網頁動畫方式的整合清單，以及常見需求的支援狀態。

After Effects

請參考：Lottie — 從 After Effects 匯入

如果你在 After Effects 中製作好動畫，可以將其匯出為 Lottie 格式的 JSON 檔案，再透過 @remotion/lottie 套件在 Remotion 中播放。

Anime.js

請參考此範例儲存庫了解整合方式。

也可閱讀這篇文章，了解一位開發者如何整合 Anime.js 與 Remotion 並大幅提升效率。

CSS 動畫

你可以透過 animation-play-state 和 animation-delay 這兩個 CSS 屬性，將 CSS 動畫與 Remotion 的時間軸同步。

核心思路：根據 useCurrentFrame() 的值計算出動畫應該處於的「時間點」，再將其設定為 animation-delay 的負值，並將 animation-play-state 設定為 paused，即可精確控制動畫在每一幀的狀態。

import { useCurrentFrame, useVideoConfig } from "remotion";
 
export const CssAnimationExample = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
 
  const currentTime = frame / fps; // 換算成秒數
 
  return (
    <div
      style={{
        animationName: "slide-in",
        animationDuration: "2s",
        animationTimingFunction: "ease-out",
        animationFillMode: "forwards",
        // 關鍵：暫停動畫並用 delay 定位到對應時間
        animationPlayState: "paused",
        animationDelay: `-${currentTime}s`,
      }}
    >
      Hello!
    </div>
  );
};

Framer Motion

目前 Remotion 尚未有官方的 Framer Motion 整合，相關討論正在 GitHub Issues 上進行中。

GIF

使用 @remotion/gif 套件在 Remotion 中播放 GIF 動畫：

npm install @remotion/gif
import { Gif } from "@remotion/gif";
import { staticFile } from "remotion";
 
export const MyComp = () => {
  return (
    <Gif
      src={staticFile("animation.gif")}
      width={400}
      height={300}
      fit="fill"
    />
  );
};

GreenSock（GSAP）

請參考：如何將 GreenSock 整合到 Remotion

GSAP 的動畫時間必須與 Remotion 的幀數同步，通常的做法是將 GSAP 時間軸的 time 屬性設定為當前幀對應的秒數，並將播放狀態暫停。

Lottie

使用官方的 @remotion/lottie 套件：

npm install @remotion/lottie
import { Lottie } from "@remotion/lottie";
import { staticFile } from "remotion";
import animationData from "./animation.json";
 
export const MyComp = () => {
  return (
    <Lottie
      animationData={animationData}
      style={{ width: 400, height: 400 }}
    />
  );
};

Matter.js

目前沒有現成的整合方案，但有兩個範例示範如何將 Matter.js 的物理模擬「烘焙」（bake）成時間軸資料，再與 Remotion 同步：

「烘焙」的核心概念是：預先執行完整的 Matter.js 模擬，將每個物件在每一幀的位置記錄下來，渲染時直接查表，而不是實時計算物理。

React Native Skia

使用官方的 @remotion/skia 套件，在 Remotion 中使用 React Native Skia 的圖形繪製能力：

npm install @remotion/skia

請參考官方文件了解完整的設定步驟，因為 Skia 需要額外的 Webpack 設定。

react-spring

react-spring 目前與 Remotion 沒有直接的相容性，但 Remotion 提供了自己的 spring() 函式，可以滿足大多數彈簧動畫需求：

import { spring, useCurrentFrame, useVideoConfig } from "remotion";
 
export const MyComp = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
 
  const scale = spring({
    fps,
    frame,
    config: {
      stiffness: 200,
      damping: 20,
      mass: 1,
    },
  });
 
  return (
    <div style={{ transform: `scale(${scale})` }}>
      Hello!
    </div>
  );
};

Reanimated

目前沒有可用的整合方案，但 Remotion 與 Reanimated 共用了部分程式碼，特別是 interpolate()、spring() 和 Easing，這讓從 Reanimated 遷移既有動畫變得相對容易。

Rive

使用官方的 @remotion/rive 套件在 Remotion 中播放 Rive 動畫：

npm install @remotion/rive

TailwindCSS

請參考：TailwindCSS 整合指南

Three.js

使用官方的 @remotion/three 套件，在 Remotion 中使用 Three.js 建立 3D 場景：

npm install @remotion/three
import { ThreeCanvas } from "@remotion/three";
import { useCurrentFrame, useVideoConfig } from "remotion";
import { Mesh, BoxGeometry, MeshBasicMaterial } from "three";
 
export const ThreeExample = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
 
  return (
    <ThreeCanvas width={1920} height={1080}>
      {/* 在此放置 Three.js 元件 */}
    </ThreeCanvas>
  );
};

Vidstack

使用 Remotion Provider for Vidstack 來整合 Vidstack 播放器功能。

其他函式庫

如果你想在 Remotion 中使用上述未列出的函式庫，可以在 GitHub 上開啟一個 Issue 詢問。雖然我們無法保證提供協助，但你可以登記需求並開啟討論。

整合的核心原則

不論整合哪種動畫函式庫，關鍵都在於：

  1. 暫停動畫的自動播放：大多數動畫函式庫預設會自動播放，必須將其停止。
  2. 根據幀數設定時間：將 useCurrentFrame() / fps（轉換為秒數）傳入函式庫的「設定時間」API。
  3. 確保每幀的確定性：相同的幀數輸入必須產生相同的畫面輸出，這是 Remotion 渲染的基本要求。

相關資源