Skip to main content

Remotion 与 Motion Canvas 相比如何？

以下是 Remotion 与 Motion Canvas 之间的一些差异，以帮助你决定哪个库更适合你。
此比较由 Remotion 撰写，并参考了 Motion Canvas 社区的意见。

🌐 Here are a few differences between Remotion and Motion Canvas to help you decide which library is best.
The comparison has been authored by Remotion with input from the Motion Canvas community.

网页 与 画布​

🌐 Web vs. Canvas

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

🌐 Remotion uses a whole DOM tree for the video, while Motion Canvas uses a single <canvas> element.

Remotion 可能可以渲染更多类型的内容，但需要无头浏览器来创建视频。
Motion Canvas 只能渲染基于画布的内容，但可以在浏览器中完成。

🌐 Remotion may render more types of content, but needs a headless browser to create a video.
Motion Canvas can only render canvas-based content, but may do so in the browser.

API 比较​

🌐 API comparison

Remotion 使你能够基于当前时间渲染 React 标记。React 是一个用于构建用户界面的流行库。

🌐 Remotion enables you to render React markup based on the current time. React is a popular library for building UIs.

Motion Canvas 使用命令式 API。元素不是基于时间戳渲染标记，而是按照过程性方式添加到时间轴上。

🌐 Motion Canvas uses an imperative API. Rather than rendering markup based on a timestamp, elements are added procedurally to the timeline.

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

🌐 Remotions programming style can be described as "declarative" and "keyframe-based", while the terms "imperative" and "procedural" describe Motion Canvas well.

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

🌐 Here is an identical animation (Red circle turning into an orange one, then jumping to the right using a spring animation) in Remotion and Motion Canvas:

Remotion Implementation
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 Implementation
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));
});

广泛与专业​

🌐 Broad vs. specialized

Remotion 尽量对视频内容做出最少的假设，并支持各种各样的使用场景。
Motion Canvas 旨在制作信息型矢量动画，并内置 API 以优化该使用场景。

🌐 Remotion tries to make as few assumptions over the content of the video as possible and supports a wide variety of use cases.
Motion Canvas is designed for informative vector animations and ships built-in APIs to optimize for this use case.

每个库的特殊特性​

🌐 Special qualities of each library

每个库都有你可能觉得有用的独特功能：

🌐 Each library has unique features that you might find useful:

Remotion 拥有：

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

Motion Canvas 拥有:

  • 可以通过图形用户界面操作的时间事件和属性
  • 通过用户界面同步音频的能力
  • 用于 LaTeX 和代码块动画的内置组件。

商业与开源​

🌐 Commercial vs. Open Source

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

🌐 Remotion is source-available software that requires a license for use in companies, while Motion Canvas is truly open source software.

虽然在公司中使用 Remotion 需要花费资金，但我们能够将这笔钱再次投入到进一步改进 Remotion 中。

🌐 While Remotion costs money for use in a company, we are able to reinvest this money into further improving Remotion.

我应该选择哪一个？​

🌐 Which one should I choose?

这取决于——根据你觉得有用的功能和你最熟悉的思维模型选择合适的库。

🌐 It depends - choose the right library based on the features that sound useful to you and the mental model that you feel most comfortable with.

Last updated on