Skip to main content

interpolateStyles()

属于@remotion/animation-utils包。

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

示例​

tsx
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} />;
};
tsx
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 个参数的函数：

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

返回值​

  • 代表基于当前帧的插值样式的样式对象。

使用说明​

  • 确保inputRange和outputStylesRange数组至少包含两个值，以便在样式之间进行插值。

  • outputStylesRange数组必须与inputRange具有相同数量的元素。outputStylesRange中的每个样式对应于输入范围中的特定值。

参见​