Rive 使用的注意事項

在After Effects與Rive之間的檔案轉換有以下幾種方式:

直接匯入Lottie檔案

  • 可以將After Effects動畫透過Bodymovin外掛程式匯出為JSON格式
  • 將Lottie JSON檔案直接拖放到Rive編輯器中即可匯入

Rive的匯出選項

  • 預設匯出格式為.riv檔案,可用於網頁或應用程式
  • 提供.rev備份格式,保留更多資訊如狀態機位置等
  • 可匯出為MP4、GIF、PNG序列和WebM等格式

重要考量

  • Rive與After Effects有不同的設計目的:
    • After Effects主要用於後製和線性動畫
    • Rive專注於互動式動畫和即時運行
  • Rive檔案相較Lottie具有以下優勢:
    • 檔案更小
    • 執行效能更好
    • 記憶體使用更少

建議作法

如果需要在產品中使用互動式動畫,建議直接在Rive中創建,而不是從After Effects轉換。這樣可以充分利用Rive的互動功能和效能優勢。


How do I use the Bodymovin plugin in After Effects

使用Bodymovin外掛程式步驟

安裝Bodymovin

  • 可以從Adobe Creative Cloud的外掛程式區塊下載
  • 或從AE Scripts網站購買(約20美元)
  • 也可以從GitHub免費下載

基本使用流程

  • 在After Effects中完成動畫製作
  • 從Window選單中選擇Extensions,然後選擇Bodymovin
  • 在Bodymovin面板中選擇要匯出的composition
  • 點擊綠色文字區域設定檔案名稱和儲存位置
  • 點擊Render開始轉檔

重要設定

  • 確保在Preferences > Scripting & Expressions中:
    • 啟用"Allow Scripts to Write Files and Access Network"
    • 啟用"Enable JavaScript Debugger"

優化建議

  • 取消勾選Glyphs選項以便於字體管理
  • 勾選"Pretty print JSON"使輸出的JSON更易讀
  • 避免使用After Effects內建的特效和預設,因為部分功能可能無法正確轉換

輸出格式

  • 預設輸出為JSON檔案
  • 如有需要也可輸出PNG序列
  • 輸出的檔案可用於網頁或手機應用程式

注意事項

輸出的JSON檔案體積小、可縮放且不失真,適合用於網頁和行動裝置上的互動式動畫。


What are the main differences between Rive and Lottie

性能與檔案大小

  • Rive檔案明顯較小,僅為Lottie的一小部分,特別適合行動應用程式
  • Rive在效能表現上較佳,可達到60FPS,而Lottie約17FPS
  • 在記憶體使用方面,Rive在Java和Native記憶體使用量較少,但在Graphics記憶體使用較多

互動性與功能

  • Rive專注於互動式動畫,內建狀態機制(State Machine)功能
  • Lottie主要用於線性動畫,需要額外程式碼才能實現互動功能
  • Rive提供專門的編輯器用於互動式動畫設計

工作流程與整合

  • Lottie與Adobe After Effects完美整合,使用Bodymovin外掛程式匯出
  • Rive需要使用其專屬編輯器進行動畫製作
  • Lottie擁有較大的社群支援和現成動畫資源庫

價格與可及性

  • Lottie為開源免費工具
  • Rive採用付費訂閱制

技術特點

特性 Rive Lottie
檔案格式 專屬.riv格式 JSON格式
動畫類型 向量動畫為主 支援向量和圖像序列
學習曲線 較陡峭 較平緩
平台支援 Web、iOS、Android、React、Flutter等 廣泛支援各種平台

適用場景

Rive適合:

  • 需要複雜互動的專案
  • 對檔案大小有嚴格要求的應用
  • 需要高效能動畫的場景

Lottie適合:

  • Adobe After Effects使用者
  • 需要簡單線性動畫的專案
  • 預算有限的開發者

Can I export After Effects animations directly to Rive

無法直接從After Effects匯出至Rive,但可以透過以下流程進行轉換:

使用Bodymovin轉換流程

  • 在After Effects中安裝Bodymovin外掛程式
  • 將動畫匯出為Lottie JSON檔案
  • 將JSON檔案拖放至Rive編輯器中即可匯入

Rive支援的匯入格式

  • Lottie JSON檔案
  • SVG檔案
  • PNG、JPG和PSD圖檔

重要注意事項

  • Rive與After Effects有不同的設計目標:
    • After Effects主要用於影片輸出
    • Rive專注於互動式動畫

建議作法

如果要在Rive中使用After Effects的動畫:

  • 確保原始動畫不要使用太複雜的效果
  • 可能需要調整某些混合模式,因為Rive不支援所有After Effects的混合模式
  • 考慮直接在Rive中重新製作動畫以獲得最佳效果

Are there any specific settings in After Effects that affect the export to Rive

匯出設定注意事項

基本設定建議

  • 避免使用After Effects內建特效,因為部分功能可能無法正確轉換
  • 確保動畫使用簡單的效果以確保相容性
  • 需調整某些混合模式,因為Rive不支援所有After Effects的混合模式

匯出流程設定

Bodymovin外掛程式設定

  • 在Preferences > Scripting & Expressions中:
    • 啟用"Allow Scripts to Write Files and Access Network"
    • 啟用"Enable JavaScript Debugger"

優化選項

  • 取消勾選Glyphs選項以便於字體管理
  • 建議勾選"Pretty print JSON"使輸出的JSON更易讀
  • 避免直接從After Effects匯出H.264格式

工作流程建議

建議直接在Rive中重新製作動畫,而不是從After Effects轉換,這樣可以:

  • 更好地利用Rive的互動功能
  • 獲得更好的效能表現
  • 確保動畫效果的完整性