Remotion 教程 08：把 Lottie 和 Rive 动效资产接进时间轴
Lottie 和 Rive 解决的是同一类问题：设计师或动效工具已经产出了动画资产，Remotion 负责把它放进视频时间轴。
这类场景不要急着手写复杂 SVG 动画。只要资产质量可靠，直接复用通常更稳定，也更接近设计稿。
Lottie 是什么
Lottie 通常来自 After Effects、Bodymovin 或在线动效工具。它的结果是 JSON 数据，里面描述了图层、关键帧、形状、颜色和动画时间。
适合：
- 品牌片头。
- 图标动效。
- 加载状态。
- 营销视频里的装饰动画。
- 不需要复杂交互的矢量动效。
在 Remotion 中，Lottie 更像一个素材层。它可以自己播放关键帧动画，外层仍然由 Remotion 决定它什么时候出现、持续多久、和字幕音频如何同步。
Lottie 最小示例
import React from "react";
import { Lottie } from "@remotion/lottie";
import { AbsoluteFill } from "remotion";
const animationData = {
v: "5.7.4",
fr: 30,
ip: 0,
op: 90,
w: 420,
h: 420,
assets: [],
layers: [],
};
export const LottieDemo: React.FC = () => {
return (
<AbsoluteFill
style={{
backgroundColor: "#f8fafc",
display: "grid",
placeItems: "center",
}}
>
<Lottie
animationData={animationData}
loop
style={{ width: 420, height: 420 }}
/>
</AbsoluteFill>
);
};真实项目里，animationData 通常来自设计工具导出的 JSON 文件。上面只展示结构，实际动画数据会比这长很多。
外层仍然可以用 frame
你可以让 Lottie 自己播放，同时让外层元素由 Remotion frame 控制：
const frame = useCurrentFrame();
const opacity = interpolate(frame, [20, 40], [0, 1], {
extrapolateLeft: "clamp",
extrapolateRight: "clamp",
});也可以叠加一个由 Remotion 控制的脉冲环：
const ringScale = interpolate(frame % 45, [0, 45], [0.42, 1.55]);
const ringOpacity = interpolate(frame % 45, [0, 32, 45], [0.8, 0.22, 0]);这说明：资产动画可以和 Remotion frame 动画共存。
Rive 是什么
Rive 更偏交互动效和状态机。它适合角色、按钮状态、品牌动态组件、游戏式 UI 动效。
Rive 的关键不是 JSON，而是 .riv 文件。这个文件通常包含：
- artboard。
- animation。
- state machine。
- input 参数。
没有 .riv 资产，就没有真实 Rive 动画可以渲染。
Rive 最小示例
对于简单 .riv 文件，可以直接用 @remotion/rive：
import React from "react";
import { RemotionRiveCanvas } from "@remotion/rive";
import { AbsoluteFill, staticFile } from "remotion";
export const RiveDemo: React.FC = () => {
return (
<AbsoluteFill style={{ backgroundColor: "#111827" }}>
<RemotionRiveCanvas
src={staticFile("rive/case1-lite.riv")}
fit="contain"
alignment="center"
/>
</AbsoluteFill>
);
};@remotion/rive 会读取 .riv 文件，并播放默认 artboard 里的默认动画。
新 Rive 文件的 runtime 兼容问题
较新的 .riv 文件可能会在旧 Rive Web runtime 里报错，例如：
RuntimeError: null function
function signature mismatch这通常不是 Remotion 时间轴的问题，而是 .riv 文件和 Rive Web runtime 版本不兼容。
解决方式是使用项目里直接安装的新版本 @rive-app/canvas-advanced，并加载同版本本地 wasm。示例项目里就使用了这个方式播放较新的 .riv 文件。
什么时候选 Lottie
优先选 Lottie 的情况：
- 设计资产已经是 Lottie JSON。
- 动画主要是矢量图形和关键帧。
- 不需要复杂状态机。
- 目标是片头、图标、装饰动效。
不要选 Lottie 的情况：
- 需要真实 3D。
- 需要复杂粒子或光效。
- 需要大量交互状态。
- 资产里有 Lottie Web 不支持的 AE 特性。
什么时候选 Rive
优先选 Rive 的情况：
- 已经有
.riv文件。 - 动画有明确状态，例如 idle、talking、success、error。
- 需要角色或品牌动态组件。
- 希望设计师维护状态机。
不要选 Rive 的情况：
- 没有可用
.riv资产。 - 只需要简单图标动效。
- 只需要视频里的普通入场动画。
示例项目位置
这篇文章对应示例项目里的：
Composition: LessonLottieEcosystem
Composition: LessonRiveEcosystem
文件: src/lessons/LottieEcosystem.tsx
文件: src/lessons/RiveEcosystem.tsx
文件: src/lessons/LocalRiveCanvas.tsx
资产: public/rive/25774-48147-interactive-sasquatich.riv示例项目里的 Lottie 示例使用内置 JSON 动画，并叠加了 Remotion frame 驱动的脉冲环。Rive 示例使用本地 @rive-app/canvas-advanced runtime 播放真实 .riv 文件。
下一篇进入 Three：当视频里需要真实 3D 产品展示时，时间轴应该怎么写。