动画属性

动画是通过随时间改变属性来实现的。 让我们创建一个简单的淡入动画。

🌐 Animation works by changing properties over time.
Let's create a simple fade in animation.

如果我们想在 60 帧内淡入文字，我们需要随着时间逐渐改变 opacity，使其从 0 变为 1。

🌐 If we want to fade the text in over 60 frames, we need to gradually change the opacity over time so that it goes from 0 to 1.

FadeIn.tsx
export const FadeIn = () => {
  const frame = useCurrentFrame();

  const opacity = Math.min(1, frame / 60);

  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "white",
        fontSize: 80,
      }}
    >
      <div style={{ opacity: opacity }}>Hello World!</div>
    </AbsoluteFill>
  );
};

使用插值辅助函数

🌐 Using the interpolate helper function

使用 interpolate() 函数可以使动画更易读。上面的动画也可以写成:

🌐 Using the interpolate() function can make animations more readable. The above animation can also be written as:

import { interpolate } from "remotion";

const opacity = interpolate(frame, [0, 60], [0, 1], {
  /*                        ^^^^^   ^^^^^    ^^^^
  Variable to interpolate ----|       |       |
  Input range ------------------------|       |
  Output range -------------------------------|  */
  extrapolateRight: "clamp",
});

在此示例中，我们将帧 0 到 60 映射到它们的不透明度值 (0, 0.0166, 0.033, 0.05 ...，并使用 extrapolateRight 设置来限制输出，使其永远不会超过 1。

🌐 In this example, we map the frames 0 to 60 to their opacity values (0, 0.0166, 0.033, 0.05 ...) and use the extrapolateRight setting to clamp the output so that it never becomes bigger than 1.

使用弹簧动画

🌐 Using spring animations

弹簧动画是一种自然的动画原语。默认情况下，它们会随时间从 0 动画到 1。这一次，让我们来动画化文本的缩放。

🌐 Spring animations are a natural animation primitive. By default, they animate from 0 to 1 over time. This time, let's animate the scale of the text.

import { spring, useCurrentFrame, useVideoConfig } from "remotion";

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const scale = spring({
    fps,
    frame,
  });

  return (
    <div
      style={{
        flex: 1,
        textAlign: "center",
        fontSize: "7em",
      }}
    >
      <div style={{ transform: `scale(${scale})` }}>Hello World!</div>
    </div>
  );
};

你应该看到文本跳进去。

🌐 You should see the text jump in.

默认的弹簧配置会导致有一点超调，这意味着文本会稍微弹跳一下。请参阅 spring() 的文档页面以了解如何自定义它。

🌐 The default spring configuration leads to a little bit of overshoot, meaning the text will bounce a little bit. See the documentation page for spring() to learn how to customize it.

始终使用 useCurrentFrame() 进行动画

🌐 Always animate using useCurrentFrame()

在渲染过程中注意闪烁问题，如果你编写的动画不是由 useCurrentFrame() 驱动的，例如 CSS 过渡，可能会出现这些问题。

🌐 Watch out for flickering issues during rendering that arise if you write animations that are not driven by useCurrentFrame() – for example CSS transitions.

了解更多关于 Remotion 渲染工作原理的信息 - 了解它将帮助你在以后避免出现问题。