Skip to main content

interpolate()

Also available as a 6min video
如何插值()

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

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

示例：淡入效果​

🌐 Example: Fade-in effect

在这个例子中，我们通过计算某个时间点的透明度来淡入一些内容。 在第0帧（视频开始时），我们希望透明度为0。 在第20帧，我们希望透明度为1。

🌐 In this example, we are fading in some content by calculating the opacity for a certain point of time. At frame 0 (the start of the video), we want the opacity to be 0. At frame 20, we want the opacity to be 1.

使用以下代码片段，我们可以计算任何帧的当前不透明度：

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

import {interpolate, useCurrentFrame} from 'remotion';

const frame = useCurrentFrame(); // 10
const opacity = interpolate(frame, [0, 20], [0, 1]); // 0.5

示例：淡入淡出​

🌐 Example: Fade in and out

我们保留淡入效果，但在结尾添加淡出效果。视频结束前20帧时，不透明度仍应为1。到结束时，不透明度应为0。

🌐 We keep our fade in effect but add a fade out effect at the end. 20 frames before the video ends, the opacity should still be 1. At the end, the opacity should be 0.

我们可以一次在多个点上进行插值，并使用useVideoConfig()来确定作品的持续时间。

🌐 We can interpolate over multiple points in one go and use useVideoConfig() to determine the duration of the composition.

import {interpolate, useCurrentFrame, useVideoConfig} from 'remotion';

const frame = useCurrentFrame();
const {durationInFrames} = useVideoConfig();
const opacity = interpolate(
  frame,
  [0, 20, durationInFrames - 20, durationInFrames],
  // v--v---v----------------------v
  [0, 1, 1, 0],
);

示例：插值一个弹簧动画​

🌐 Example: interpolate a spring animation

我们不一定非得随时间插值——我们可以使用任何数值来驱动动画。 假设我们想在 X 轴上将一个对象从 0 动画到 200 像素，并使用弹簧动画来实现它。

🌐 We don't necessarily have to interpolate over time - we can use any value to drive an animation. Let's assume we want to animate an object on the X axis from 0 to 200 pixels and use a spring animation for it.

让我们创造一个弹簧：

🌐 Let's create a spring:

import {useCurrentFrame, interpolate, spring, useVideoConfig} from 'remotion';

const frame = useCurrentFrame();
const {fps} = useVideoConfig();
const driver = spring({
  frame,
  fps
});

一个 spring() 动画使用其默认设置将从 0 动画到 1。基于这个知识，我们可以插值弹簧值，使其从 0 变到 200。

🌐 A spring() animation with it's default settings will animate from 0 to 1. Given that knowledge, we can interpolate the spring value to go from 0 to 200.

const marginLeft = interpolate(driver, [0, 1], [0, 200]);

然后我们可以将它应用到一个 HTML 元素上。

🌐 We can then apply it to an HTML element.

const Component: React.FC = () => <div style={{marginLeft}}></div>;

示例：防止输出超出输出范围​

🌐 Example: Prevent the output from going outside the output range

考虑以下插值，它应该在 20 帧内对缩放进行动画处理：

🌐 Consider the following interpolation which is supposed to animate the scale over 20 frames:

const scale = interpolate(frame, [0, 20], [0, 1]);

这可以工作，但在20帧之后，数值会不断增长。例如，在第40帧时，缩放将是 2。为了防止这种情况，我们可以使用 extrapolateLeft 和 extrapolateRight 选项，并将它们设置为 'clamp'，以防结果超出输出范围。

🌐 This works, but after 20 frames, the value keeps growing. For example, at frame 40, the scale will be 2. To prevent this, this we can use the extrapolateLeft and extrapolateRight options and set them to 'clamp' to prevent the result going outside the output range.

const scale = interpolate(frame, [0, 20], [0, 1], {
  extrapolateRight: 'clamp',
});

应用编程接口​

🌐 API

需要四个参数：

🌐 Takes four arguments:

  1. 输入值。
  2. 你期望输入取值的范围。
  3. 你希望输入映射到的输出值范围。
  4. 选项对象：

extrapolateLeft?​

默认: extend

🌐 Default: extend

如果输入值位于输入范围的左侧，应发生什么：

🌐 What should happen if the input value is outside the left side of the input range:

  • extend：即使超出输出范围，也要进行插值。
  • clamp：改为返回范围内最接近的值
  • wrap：循环值变化。
  • identity：而是返回输入值。

extrapolateRight?​

默认: extend

🌐 Default: extend

与 extrapolateLeft 相同，只是针对输入范围右侧之外的值。

🌐 Same as extrapolateLeft, except for values outside right the input range.

示例：

🌐 Example:

interpolate(1.5, [0, 1], [0, 2], {extrapolateRight: 'extend'}); // 3
interpolate(1.5, [0, 1], [0, 2], {extrapolateRight: 'clamp'}); // 2
interpolate(1.5, [0, 1], [0, 2], {extrapolateRight: 'identity'}); // 1.5
interpolate(1.5, [0, 1], [0, 2], {extrapolateRight: 'wrap'}); // 1

easing?​

默认: (x) => x

🌐 Default: (x) => x

允许你自定义输入的函数，例如应用某种缓动函数。默认情况下，输入保持不变，从而产生纯线性插值。阅读内置缓动函数的文档。

🌐 Function which allows you to customize the input, for example to apply a certain easing function. By default, the input is left unmodified, resulting in a pure linear interpolation. Read the documentation for the built-in easing functions.

import {interpolate, Easing} from 'remotion';

interpolate(frame, [0, 100], [0, 1], {
  easing: Easing.bezier(0.8, 0.22, 0.96, 0.65),
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

//this is Remotion2.0 feature
interpolate(frame, [0, 10, 40, 100], [0, 0.2, 0.6, 1], {
  easing: Easing.bezier(0.8, 0.22, 0.96, 0.65),
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

类型​

🌐 Types

自 v3.3.77 起，选项的类型从 Remotion 导出。

🌐 Since v3.3.77, types for the options are exported from Remotion.

import {ExtrapolateType, InterpolateOptions} from 'remotion';

const extrapolate: ExtrapolateType = 'clamp';
const option: InterpolateOptions = {extrapolateLeft: extrapolate};

兼容性​

🌐 Compatibility

BrowsersServersEnvironments
Chrome
Firefox
Safari
Node.js
Bun
Serverless Functions

另请参阅​

🌐 See also

Last updated on