Skip to main content

interpolateColors()

从 v2.0.3 版本开始可用

允许您使用简洁的语法将一系列值映射到颜色。

参考​

参数​

  1. 输入值。
  2. 你期望输入值假定的值范围。
  3. 您希望输入值映射到的输出颜色范围。

返回​

interpolateColors() 返回一个 rgba 颜色字符串。例如：rgba(255, 100, 12, 1)

示例：插值颜色​

在此示例中，我们正在从红色插值到黄色。在第 0 帧（视频的开始），我们希望颜色为 red。在第 20 帧，我们希望颜色为 yellow。

使用以下代码片段，我们可以计算任何帧的当前颜色：

tsx
import { interpolateColors, useCurrentFrame } from "remotion";
 
const frame = useCurrentFrame() / 10;
 
const color = interpolateColors(frame, [0, 20], ["red", "yellow"]); // rgba(255, 128, 0, 1)
 
const color2 = interpolateColors(frame, [0, 20], ["#ff0000", "#ffff00"]); // rgba(255, 128, 0, 1)
tsx
import { interpolateColors, useCurrentFrame } from "remotion";
 
const frame = useCurrentFrame() / 10;
 
const color = interpolateColors(frame, [0, 20], ["red", "yellow"]); // rgba(255, 128, 0, 1)
 
const color2 = interpolateColors(frame, [0, 20], ["#ff0000", "#ffff00"]); // rgba(255, 128, 0, 1)

示例：插值 rgb 或 rgba 颜色​

在此示例中，我们正在从红色插值到黄色。在第 0 帧（视频的开始），我们希望颜色为 red（rgb(255, 0, 0)）。在第 20 帧，我们希望颜色为 yellow（rgba(255, 255, 0)）。

使用以下代码片段，我们可以计算任何帧的当前颜色：

tsx
import { interpolateColors, useCurrentFrame } from "remotion";
 
const frame = useCurrentFrame(); // 10
 
// RGB colors
const color = interpolateColors(
  frame,
  [0, 20],
  ["rgb(255, 0, 0)", "rgb(255, 255, 0)"]
); // rgba(255, 128, 0, 1)
 
// RGBA colors
const color2 = interpolateColors(
  frame,
  [0, 20],
  ["rgba(255, 0, 0, 1)", "rgba(255, 255, 0, 0)"]
); // rgba(255, 128, 0, 0.5)
tsx
import { interpolateColors, useCurrentFrame } from "remotion";
 
const frame = useCurrentFrame(); // 10
 
// RGB colors
const color = interpolateColors(
  frame,
  [0, 20],
  ["rgb(255, 0, 0)", "rgb(255, 255, 0)"]
); // rgba(255, 128, 0, 1)
 
// RGBA colors
const color2 = interpolateColors(
  frame,
  [0, 20],
  ["rgba(255, 0, 0, 1)", "rgba(255, 255, 0, 0)"]
); // rgba(255, 128, 0, 0.5)

示例：插值 hsl 或 hsla 颜色​

在此示例中，我们正在从红色插值到黄色。在第 0 帧（视频的开始），我们希望颜色为 red（hsl(0, 100%, 50%)）。在第 20 帧，我们希望颜色为 yellow（hsl(60, 100%, 50%)）。

使用以下代码片段，我们可以计算任何帧的当前颜色：

ts
import { useCurrentFrame, interpolateColors } from "remotion";
 
const frame = useCurrentFrame(); // 10
//hsl example
const color = interpolateColors(
  frame,
  [0, 20],
  ["hsl(0, 100%, 50%)", "hsl(60, 100%, 50%)"]
); // rgba(255, 128, 0, 1)
 
//hsla example
const color2 = interpolateColors(
  frame,
  [0, 20],
  ["hsla(0, 100%, 50%, 1)", "hsla(60, 100%, 50%, 1)"]
); // rgba(255, 128, 0, 1)
ts
import { useCurrentFrame, interpolateColors } from "remotion";
 
const frame = useCurrentFrame(); // 10
//hsl example
const color = interpolateColors(
  frame,
  [0, 20],
  ["hsl(0, 100%, 50%)", "hsl(60, 100%, 50%)"]
); // rgba(255, 128, 0, 1)
 
//hsla example
const color2 = interpolateColors(
  frame,
  [0, 20],
  ["hsla(0, 100%, 50%, 1)", "hsla(60, 100%, 50%, 1)"]
); // rgba(255, 128, 0, 1)

示例：插值颜色名称​

还支持插值 CSS 颜色名称。

ts
import { useCurrentFrame, interpolateColors } from "remotion";
 
const frame = useCurrentFrame(); // 10
 
const color = interpolateColors(frame, [0, 20], ["red", "yellow"]); // rgba(255, 128, 0, 1)
ts
import { useCurrentFrame, interpolateColors } from "remotion";
 
const frame = useCurrentFrame(); // 10
 
const color = interpolateColors(frame, [0, 20], ["red", "yellow"]); // rgba(255, 128, 0, 1)

参见​