Skip to main content

缓和

Easing 模块实现了常用的缓动函数。你可以通过 interpolate() API 使用它。

🌐 The Easing module implements common easing functions. You can use it with the interpolate() API.

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

🌐 You can find a visualization of some common easing functions at http://easings.net/

预定义动画​

🌐 Predefined animations

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

🌐 The Easing module provides several predefined animations through the following methods:

  • [back](/docs/easing#back) 提供了一个基本动画，其中对象在向前移动之前会稍微向后移动
  • bounce 提供了一个弹跳动画
  • ease 提供了一个基本的惯性动画
  • elastic 提供了一个基本的弹簧交互

标准函数​

🌐 Standard functions

提供了三种标准的缓动函数：

🌐 Three standard easing functions are provided:

[poly](/docs/easing#poly) 函数可用于实现四次方、五次方及其他更高次方函数。

🌐 The poly function can be used to implement quartic, quintic, and other higher power functions.

附加功能​

🌐 Additional functions

附加的数学函数由以下方法提供：

🌐 Additional mathematical functions are provided by the following methods:

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

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

🌐 The following helpers are used to modify other easing functions.

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

示例​

🌐 Example

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",
      }}
    />
  );
};

参考

🌐 Reference

方法​

🌐 Methods

step0​

static step0(n): number

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

🌐 A stepping function, returns 1 for any positive value of n.

step1​

static step1(n): number

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

🌐 A stepping function, returns 1 if n is greater than or equal to 1.

linear​

static linear(t): number

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

🌐 A linear function, f(t) = t. Position correlates to elapsed time one to one.

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

ease​

static ease(t): number

一种基本的惯性相互作用，类似于对象缓慢加速到一定速度。

🌐 A basic inertial interaction, similar to an object slowly accelerating to speed.

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

quad​

static quad(t): number

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

🌐 A quadratic function, f(t) = t * t. Position equals the square of elapsed time.

http://easings.net/#easeInQuad

cubic​

static cubic(t): number

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

🌐 A cubic function, f(t) = t * t * t. Position equals the cube of elapsed time.

http://easings.net/#easeInCubic

poly()​

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

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

🌐 A power function. Position is equal to the Nth power of elapsed time.

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

sin​

static sin(t): number

一个正弦函数。

🌐 A sinusoidal function.

http://easings.net/#easeInSine

circle​

static circle(t): number

一个圆函数。

🌐 A circular function.

http://easings.net/#easeInCirc

exp​

static exp(t): number

一个指数函数。

🌐 An exponential function.

http://easings.net/#easeInExpo

elastic()​

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

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

🌐 A basic elastic interaction, similar to a spring oscillating back and forth.

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

🌐 Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.

http://easings.net/#easeInElastic

back()​

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

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

🌐 Use with Animated.parallel() to create a basic effect where the object animates back slightly as the animation starts.

bounce​

static bounce(t): number

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

🌐 Provides a basic bouncing effect.

http://easings.net/#easeInBounce

请参见下面的示例，了解如何使用它

🌐 See an example of how you might use it below

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

bezier()​

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

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

🌐 Provides a cubic bezier curve, equivalent to CSS Transitions' transition-timing-function.

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

🌐 A useful tool to visualize cubic bezier curves can be found at http://cubic-bezier.com/

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

in(easing)​

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

正向运行缓动函数。

🌐 Runs an easing function forwards.

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

out()​

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

将缓动函数反向运行。

🌐 Runs an easing function backwards.

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

inOut()​

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

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

🌐 Makes any easing function symmetrical. The easing function will run forwards for half of the duration, then backwards for the rest of the duration.

鸣谢​

🌐 Credits

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

🌐 The Easing API is the exact same as the one from React Native and the documentation has been copied over. Credit goes to them for this excellent API.

兼容性​

🌐 Compatibility

BrowsersServersEnvironments
Chrome
Firefox
Safari
Node.js
Bun
Serverless Functions

另请参阅​

🌐 See also

Last updated on