Skip to main content

属性动画

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

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

FadeIn.tsx
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>
  );
};
FadeIn.tsx
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>
  );
};

使用 interpolate 辅助函数​

使用 interpolate() 函数可以使动画更易读。上述动画也可以写成：

tsx
import { interpolate } from "remotion";
 
const opacity = interpolate(frame, [0, 60], [0, 1], {
  /*                        ^^^^^   ^^^^^    ^^^^
  Variable to interpolate ----|       |       |
  Input range ------------------------|       |
  Output range -------------------------------|  */
  extrapolateRight: "clamp",
});
tsx
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。

使用弹簧动画​

弹簧动画是一种自然的动画基元。默认情况下，它们会随时间从 0 变为 1。这次，让我们动画文本的比例。

tsx
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>
  );
};
tsx
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>
  );
};

您应该看到文本跳动。


默认弹簧配置会导致略微超调，意味着文本会有些反弹。查看文档页面 spring() 以了解如何自定义它。

始终使用 useCurrentFrame() 进行动画​

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

阅读更多关于 Remotion 渲染工作原理的信息 - 了解这一点将帮助您避免未来出现问题。