Skip to main content

Remotion与Motion Canvas有何不同？

以下是Remotion和Motion Canvas之间的一些区别，以帮助您决定哪个库更适合您。
这份比较由Remotion编写，同时也得到了Motion Canvas社区的意见。

Web vs. Canvas​

Remotion使用整个DOM树来制作视频，而Motion Canvas则使用单个<canvas>元素。

Remotion可以渲染更多类型的内容，但需要一个无头浏览器来创建视频。
Motion Canvas只能渲染基于canvas的内容，但可以在浏览器中执行此操作。

API比较​

Remotion允许您根据当前时间渲染基于React的标记。React是一个用于构建UI的流行库。

Motion Canvas使用命令式API。与根据时间戳渲染标记不同，元素是按程序添加到时间线中的。

Remotion的编程风格可以描述为“声明式”和“关键帧为基础”，而“命令式”和“程序化”这些术语很好地描述了Motion Canvas。

以下是在Remotion和Motion Canvas中相同的动画（红色圆圈变成橙色圆圈，然后使用弹簧动画向右跳转）：

Remotion实现
tsx
import {
  AbsoluteFill,
  interpolate,
  interpolateColors,
  spring,
  useCurrentFrame,
  useVideoConfig,
} from "remotion";
 
export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
 
  const colorChange = interpolate(frame, [0, 60], [0, 1], {
    extrapolateRight: "clamp",
  });
 
  const spr = spring({
    fps,
    frame: frame - 60,
  });
  const translateX = interpolate(spr, [0, 1], [0, 300]);
 
  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <div
        style={{
          width: 200,
          height: 200,
          borderRadius: 100,
          backgroundColor: interpolateColors(
            colorChange,
            [0, 1],
            ["#e6a700", "#e13238"],
          ),
          transform: `translateX(${translateX}px)`,
        }}
      />
    </AbsoluteFill>
  );
};
Remotion实现
tsx
import {
  AbsoluteFill,
  interpolate,
  interpolateColors,
  spring,
  useCurrentFrame,
  useVideoConfig,
} from "remotion";
 
export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
 
  const colorChange = interpolate(frame, [0, 60], [0, 1], {
    extrapolateRight: "clamp",
  });
 
  const spr = spring({
    fps,
    frame: frame - 60,
  });
  const translateX = interpolate(spr, [0, 1], [0, 300]);
 
  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <div
        style={{
          width: 200,
          height: 200,
          borderRadius: 100,
          backgroundColor: interpolateColors(
            colorChange,
            [0, 1],
            ["#e6a700", "#e13238"],
          ),
          transform: `translateX(${translateX}px)`,
        }}
      />
    </AbsoluteFill>
  );
};
Motion Canvas实现
tsx
import { makeScene2D } from "@motion-canvas/2d";
import { Circle } from "@motion-canvas/2d/lib/components";
import { SmoothSpring, spring } from "@motion-canvas/core/lib/tweening";
import { createRef } from "@motion-canvas/core/lib/utils";
export default makeScene2D(function* (view) {
  const circle = createRef<Circle>();
  view.add(<Circle ref={circle} size={200} fill={"#e6a700"} />);
  yield* circle().fill("#e13238", 2);
  yield* spring(SmoothSpring, 0, 300, (value) => circle().position.x(value));
});
Motion Canvas实现
tsx
import { makeScene2D } from "@motion-canvas/2d";
import { Circle } from "@motion-canvas/2d/lib/components";
import { SmoothSpring, spring } from "@motion-canvas/core/lib/tweening";
import { createRef } from "@motion-canvas/core/lib/utils";
export default makeScene2D(function* (view) {
  const circle = createRef<Circle>();
  view.add(<Circle ref={circle} size={200} fill={"#e6a700"} />);
  yield* circle().fill("#e13238", 2);
  yield* spring(SmoothSpring, 0, 300, (value) => circle().position.x(value));
});

广泛 vs. 专业化​

Remotion尽量少做关于视频内容的假设，并支持各种用例。
Motion Canvas专为信息向量动画而设计，并提供内置API以优化此用例。

每个库的特殊特性​

每个库都有您可能发现有用的独特功能：

Remotion 具有：

  • 用于服务器端渲染的API
  • 用于创建编程视频应用的功能
  • 用于Three.JS、GIF、Lottie等的包。

Motion Canvas具有：

  • 可通过GUI操纵的时间事件和属性
  • 通过UI同步音频的能力
  • 用于LaTeX和代码块动画的内置组件。

商业版 vs. 开源版​

Remotion 是源代码可用的软件，需要公司使用许可证，而 Motion Canvas 是真正的开源软件。

虽然 Remotion 在公司使用需要花钱，但我们可以将这笔钱重新投资到进一步改进 Remotion 中。

我应该选择哪一个？​

这取决于 - 根据对你有用的功能和你感觉最舒适的思维模式选择合适的库。