Skip to main content

缓动

Easing 模块实现了常见的缓动函数。您可以将其与 interpolate() API 一起使用。

您可以在 http://easings.net/ 找到一些常见缓动函数的可视化。

预定义动画​

Easing 模块通过以下方法提供了几种预定义动画：

  • back 提供了一个基本动画，对象在向前移动之前会稍微后退
  • bounce 提供了一个弹跳动画
  • ease 提供了一个基本的惯性动画
  • elastic 提供了一个基本的弹簧交互

标准函数​

提供了三个标准缓动函数：

poly 函数可用于实现四次方、五次方和其他更高次方函数。

附加函数​

通过以下方法提供了额外的数学函数：

  • bezier 提供了一个三次贝塞尔曲线
  • circle 提供了一个圆形函数
  • sin 提供了一个正弦函数
  • exp 提供了一个指数函数

以下辅助函数用于修改其他缓动函数。

  • in 正向运行缓动函数
  • inOut 使任何缓动函数对称
  • out 反向运行缓动函数

示例​

tsx
import { Easing, interpolate } from "remotion";
 
const MyVideo: React.FC = () => {
  const frame = useCurrentFrame();
  const interpolated = interpolate(frame, [0, 100], [0, 1], {
    easing: Easing.bezier(0.8, 0.22, 0.96, 0.65),
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });
  return (
    <AbsoluteFill
      style={{
        transform: `scale(${interpolated})`,
        backgroundColor: "red",
      }}
    />
  );
};
tsx
import { Easing, interpolate } from "remotion";
 
const MyVideo: React.FC = () => {
  const frame = useCurrentFrame();
  const interpolated = interpolate(frame, [0, 100], [0, 1], {
    easing: Easing.bezier(0.8, 0.22, 0.96, 0.65),
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });
  return (
    <AbsoluteFill
      style={{
        transform: `scale(${interpolated})`,
        backgroundColor: "red",
      }}
    />
  );
};

参考

方法​

step0​

jsx
static step0(n): number
jsx
static step0(n): number

一个阶跃函数，对于任何正值的 n 返回 1。

step1​

jsx
static step1(n): number
jsx
static step1(n): number

一个阶跃函数，如果 n 大于或等于 1，则返回 1。

linear​

jsx
static linear(t): number
jsx
static linear(t): number

一个线性函数，f(t) = t。位置与经过的时间一一对应。

http://cubic-bezier.com/#0,0,1,1

ease​

jsx
static ease(t): number
jsx
static ease(t): number

一种基本的惯性交互，类似于物体缓慢加速到速度。

http://cubic-bezier.com/#.42,0,1,1

quad​

jsx
static quad(t): number
jsx
static quad(t): number

一个二次函数，f(t) = t * t。位置等于经过的时间的平方。

http://easings.net/#easeInQuad

cubic​

jsx
static cubic(t): number
jsx
static cubic(t): number

一个三次函数，f(t) = t * t * t。位置等于经过的时间的立方。

http://easings.net/#easeInCubic

poly()​

jsx
static poly(n): (t) => number
jsx
static poly(n): (t) => number

一个幂函数。位置等于经过的时间的N次幂。

n = 4: http://easings.net/#easeInQuart n = 5: http://easings.net/#easeInQuint

sin​

jsx
static sin(t): number
jsx
static sin(t): number

一个正弦函数。

http://easings.net/#easeInSine

circle​

jsx
static circle(t): number
jsx
static circle(t): number

一个圆形函数。

http://easings.net/#easeInCirc

exp​

jsx
static exp(t): number
jsx
static exp(t): number

一个指数函数。

http://easings.net/#easeInExpo

elastic()​

jsx
static elastic(bounciness): (t) =>  number
jsx
static elastic(bounciness): (t) =>  number

一种基本的弹性交互，类似于弹簧来回振荡。

默认的弹性为1，会稍微超过一点。弹性为0时完全不会超过，弹性为N > 1时会超过大约N次。

http://easings.net/#easeInElastic

back()​

jsx
static back(s): (t) => number
jsx
static back(s): (t) => number

与 Animated.parallel() 结合使用，创建一个基本效果，对象在动画开始时稍微向后动画。

bounce​

jsx
static bounce(t): number
jsx
static bounce(t): number

提供一个基本的弹跳效果。

http://easings.net/#easeInBounce

查看下面如何使用的示例

jsx
interpolate(0.5, [0, 1], [0, 1], {
  easing: Easing.bounce,
});
jsx
interpolate(0.5, [0, 1], [0, 1], {
  easing: Easing.bounce,
});

bezier()​

jsx
static bezier(x1, y1, x2, y2) => (t): number
jsx
static bezier(x1, y1, x2, y2) => (t): number

提供一个三次贝塞尔曲线，相当于 CSS 过渡的 transition-timing-function。

一个有用的工具，用于可视化三次贝塞尔曲线，可以在 http://cubic-bezier.com/ 找到。

jsx
interpolate(0.5, [0, 1], [0, 1], {
  easing: Easing.bezier(0.5, 0.01, 0.5, 1),
});
jsx
interpolate(0.5, [0, 1], [0, 1], {
  easing: Easing.bezier(0.5, 0.01, 0.5, 1),
});

in(easing)​

jsx
static in(easing: (t: number) => number): (t: number) => number;
jsx
static in(easing: (t: number) => number): (t: number) => number;

运行一个缓动函数，向前运行。

jsx
{
  easing: Easing.in(Easing.ease);
}
jsx
{
  easing: Easing.in(Easing.ease);
}

out()​

jsx
static out(easing: (t: number) => number): (t: number) => number;
jsx
static out(easing: (t: number) => number): (t: number) => number;

运行一个缓动函数，向后运行。

jsx
{
  easing: Easing.out(Easing.ease);
}
jsx
{
  easing: Easing.out(Easing.ease);
}

inOut()​

jsx
static inOut(easing: (t: number) => number): (t: number) => number;
jsx
static inOut(easing: (t: number) => number): (t: number) => number;
jsx
{
  easing: Easing.inOut(Easing.ease);
}
jsx
{
  easing: Easing.inOut(Easing.ease);
}

使任何缓动函数对称。缓动函数将在持续时间的前半部分向前运行，然后在剩余的持续时间内向后运行。

Credits​

Easing API与React Native中的API完全相同，文档已复制过来。感谢他们提供了这个出色的API。

See also​