Remotion LabRemotion Lab
›工具›從 After Effects 匯入動畫

從 After Effects 匯入動畫

使用 Bodymovin 插件將 After Effects 動畫匯出為 Lottie JSON，並在 Remotion 中透過 @remotion/lottie 套件播放

從 After Effects 匯入動畫

如果您是 After Effects 使用者，可能會希望將 After Effects 合成轉換為 Remotion 合成。您可以使用 @remotion/lottie 套件來實現這一點。

有趣的是：Remotion 的「合成（Composition）」概念正是源自於 After Effects 的同名術語！

工作流程概覽

整體流程分為三個部分：

  1. 在 After Effects 中設計動畫
  2. 使用 Bodymovin 插件匯出為 Lottie JSON
  3. 在 Remotion 中使用 @remotion/lottie 套件載入和播放

安裝 Bodymovin 插件

步驟

  1. 確認 After Effects 已關閉（重要）
  2. 前往 此網站 下載適合您平台的 ZXP 安裝程式
  3. 點擊此連結下載最新的 Bodymovin 插件
  4. 開啟 ZXP 安裝程式，將 bodymovin 文件拖入其中

在 After Effects 中建立動畫

  1. 開啟 After Effects 並建立新專案，然後點擊 New composition
  2. 在 After Effects 中設計您的動畫。例如，使用圓角矩形工具繪製藍色圓角方塊，然後開啟變換選單並點擊碼錶圖示設定關鍵影格

啟用腳本存取

在 After Effects 選單中，前往 Preferences -> Scripting & Expressions...，啟用第一個選項：Allow Scripts to Write Files and Access Network。只需執行一次。

匯出動畫為 JSON

開啟 Bodymovin 插件

在 After Effects 選單中，前往 Window -> Extensions -> Bodymovin。

匯出步驟

  1. 選擇您的合成
  2. 按下匯出圖示，選擇 JSON 文件的儲存位置
  3. 點擊 Render 寫入文件

將動畫匯入 Remotion

安裝套件

npm install @remotion/lottie

複製文件

將匯出的 JSON 文件複製到 Remotion 專案中。建議放在 public/ 目錄下（如果不存在，請先建立），然後使用 staticFile() 載入。

建立 Lottie 元件

import { Lottie, LottieAnimationData } from '@remotion/lottie';
import { useEffect, useState } from 'react';
import { cancelRender, continueRender, delayRender, staticFile } from 'remotion';
 
export const AfterEffectsAnimation: React.FC = () => {
  const [handle] = useState(() => delayRender('Loading Lottie animation'));
  const [animationData, setAnimationData] = useState<LottieAnimationData | null>(null);
 
  useEffect(() => {
    fetch(staticFile('animation.json'))
      .then((data) => data.json())
      .then((json) => {
        setAnimationData(json);
        continueRender(handle);
      })
      .catch((err) => {
        cancelRender(err);
        console.log('Animation failed to load', err);
      });
  }, [handle]);
 
  if (!animationData) {
    return null;
  }
 
  return <Lottie animationData={animationData} />;
};

在合成中使用

import { Composition } from 'remotion';
import { AfterEffectsAnimation } from './AfterEffectsAnimation';
import { getLottieMetadata } from '@remotion/lottie';
 
// 建議使合成尺寸和時長與原始 After Effects 合成相同
export const RemotionRoot = () => {
  return (
    <Composition
      id="AfterEffectsAnim"
      component={AfterEffectsAnimation}
      durationInFrames={150}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

匹配合成尺寸和時長

建議讓您的 Remotion 合成與原始 After Effects 合成具有相同的尺寸和時長。您可以使用 getLottieMetadata() 獲取這些資訊：

import { getLottieMetadata } from '@remotion/lottie';
import animationData from './animation.json';
 
const metadata = getLottieMetadata(animationData);
console.log(metadata.durationInFrames); // 動畫幀數
console.log(metadata.fps);              // 幀率
console.log(metadata.width);            // 寬度
console.log(metadata.height);           // 高度

注意事項

After Effects 功能支援

Lottie 格式支援大多數 After Effects 功能，但以下功能不受支援：

  • 表達式（Expressions）
  • 3D 圖層（需要搭配其他工具）
  • 某些效果插件

字體問題

如果動畫包含文字，確保 Lottie 文件中已將文字轉換為路徑，或確保系統上已安裝對應字體。

效能考量

複雜的 Lottie 動畫可能影響渲染效能。考慮：

  • 減少不必要的圖層
  • 簡化路徑
  • 使用較低的影格率

替代方案

如果 Lottie 不能滿足您的需求，可以考慮：

  • 在 Remotion 中直接使用 React 重新建立動畫
  • 使用 Spline 製作 3D 動畫

相關資源