动画数学

您可以添加、减去和相乘动画值，以创建更复杂的动画。
考虑以下示例：

进入和退出
tsx
import { spring, useCurrentFrame, useVideoConfig } from "remotion";
 
const frame = useCurrentFrame();
const { fps, durationInFrames } = useVideoConfig();
 
const enter = spring({
  fps,
  frame,
  config: {
    damping: 200,
  },
});
 
const exit = spring({
  fps,
  config: {
    damping: 200,
  },
  durationInFrames: 20,
  delay: durationInFrames - 20,
  frame,
});
 
const scale = enter - exit;

进入和退出
tsx
import { spring, useCurrentFrame, useVideoConfig } from "remotion";
 
const frame = useCurrentFrame();
const { fps, durationInFrames } = useVideoConfig();
 
const enter = spring({
  fps,
  frame,
  config: {
    damping: 200,
  },
});
 
const exit = spring({
  fps,
  config: {
    damping: 200,
  },
  durationInFrames: 20,
  delay: durationInFrames - 20,
  frame,
});
 
const scale = enter - exit;

• 在动画开始时，enter 的值为 0，在动画过程中逐渐增加到 1。
• 在序列结束之前，我们创建一个 exit 动画，从 0 增加到 1。
• 将 exit 动画减去 enter 动画，得到动画的整体状态，我们用它来动画 scale。

0

完整代码段
tsx
import React from "react";
import {
  AbsoluteFill,
  spring,
  useCurrentFrame,
  useVideoConfig,
} from "remotion";
 
export const AnimationMath: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps, durationInFrames } = useVideoConfig();
 
  const enter = spring({
    fps,
    frame,
    config: {
      damping: 200,
    },
  });
 
  const exit = spring({
    fps,
    config: {
      damping: 200,
    },
    durationInFrames: 20,
    delay: durationInFrames - 20,
    frame,
  });
 
  const scale = enter - exit;
 
  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "white",
      }}
    >
      <div
        style={{
          height: 100,
          width: 100,
          backgroundColor: "#4290f5",
          borderRadius: 20,
          transform: `scale(${scale})`,
          justifyContent: "center",
          alignItems: "center",
          display: "flex",
          fontSize: 50,
          color: "white",
        }}
      >
        {frame}
      </div>
    </AbsoluteFill>
  );
};

完整代码段
tsx
import React from "react";
import {
  AbsoluteFill,
  spring,
  useCurrentFrame,
  useVideoConfig,
} from "remotion";
 
export const AnimationMath: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps, durationInFrames } = useVideoConfig();
 
  const enter = spring({
    fps,
    frame,
    config: {
      damping: 200,
    },
  });
 
  const exit = spring({
    fps,
    config: {
      damping: 200,
    },
    durationInFrames: 20,
    delay: durationInFrames - 20,
    frame,
  });
 
  const scale = enter - exit;
 
  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "white",
      }}
    >
      <div
        style={{
          height: 100,
          width: 100,
          backgroundColor: "#4290f5",
          borderRadius: 20,
          transform: `scale(${scale})`,
          justifyContent: "center",
          alignItems: "center",
          display: "flex",
          fontSize: 50,
          color: "white",
        }}
      >
        {frame}
      </div>
    </AbsoluteFill>
  );
};