Skip to main content

interpolateStyles()

属于 @remotion/animation-utils 软件包的一部分.

🌐 Part of the @remotion/animation-utils package.

此函数提供了一种便捷的方法，根据指定的数值范围插值样式，从而允许在不同样式之间实现平滑动画。

🌐 This function provides a convenient way to interpolate styles based on a specified range of values, allowing for smooth animations between different styles.

示例​

🌐 Example

import {
  interpolateStyles,
  makeTransform,
  translateY,
} from "@remotion/animation-utils";

const MyComponent: React.FC = () => {
  const animatedStyles = interpolateStyles(
    15,
    [0, 30, 60],
    [
      { opacity: 0, transform: makeTransform([translateY(-50)]) },
      { opacity: 1, transform: makeTransform([translateY(0)]) },
      { opacity: 0, transform: makeTransform([translateY(50)]) },
    ],
  );

  return <div style={animatedStyles} />;
};

应用编程接口​

🌐 API

一个接受3到4个参数的函数：

🌐 A function that takes 3-4 arguments:

  1. 输入值。
  2. 你期望输入取值的范围。
  3. 你希望输入映射到的输出风格范围。
  4. 选项对象，与 interpolate() 的选项相同。可选。

返回值​

🌐 Return value

  • 一个样式对象，表示基于当前帧插值的样式。

使用说明​

🌐 Usage Notes

  • 确保 inputRange 和 outputStylesRange 数组至少包含两个值，以便在样式之间进行插值。
  • outputStylesRange 数组必须与 inputRange 具有相同数量的元素。outputStylesRange 中的每种样式对应输入范围中的一个特定值。

另请参阅​

🌐 See also

Last updated on