Skip to main content

interpolateColors()

v2.0.3

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

🌐 Allows you to map a range of values to colors using a concise syntax.

应用编程接口​

🌐 API

需要三个参数：

🌐 Takes three arguments:

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

返回​

🌐 Returns

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

🌐 A rgba color string. eg: rgba(255, 100, 12, 1)

示例​

🌐 Example

在这个例子中，我们正在将颜色从红色插值到黄色。在第0帧（视频开始时），我们希望颜色为 red。在第20帧，我们希望颜色为 yellow。

🌐 In this example, we are interpolating colors from red to yellow. At frame 0 (the start of the video), we want the color to be red. At frame 20, we want the color to be yellow.

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

🌐 Using the following snippet, we can calculate the current color for any frame:

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 颜色​

🌐 Interpolating rgb or rgba colors

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

🌐 In this example, we are interpolating colors from red to yellow. At frame 0 (the start of the video), we want the color to be red (rgb(255, 0, 0)). At frame 20, we want the color to be yellow (rgba(255, 255, 0)).

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

🌐 Using the following snippet, we can calculate the current color for any frame:

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 颜色​

🌐 Interpolating hsl or hsla colors

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

🌐 In this example, we are interpolating colors from red to yellow. At frame 0 (the start of the video), we want the color to be red (hsl(0, 100%, 50%)). At frame 20, we want the color to be yellow (hsl(60, 100%, 50%)).

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

🌐 Using the following snippet, we can calculate the current color for any frame:

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)

插值色彩名称​

🌐 Interpolating color names

也支持插值 CSS 颜色名称。

🌐 Interpolating CSS color names is also supported.

import {useCurrentFrame, interpolateColors} from 'remotion';

const frame = useCurrentFrame(); // 10

const color = interpolateColors(frame, [0, 20], ['red', 'yellow']); // rgba(255, 128, 0, 1)

兼容性​

🌐 Compatibility

BrowsersServersEnvironments
Chrome
Firefox
Safari
Node.js
Bun
Serverless Functions

另请参阅​

🌐 See also

Last updated on