跳到主要内容

Easing

Easing 模块实现了常见的缓动函数。此模块由 Animated.timing() 使用，用于在动画中传达物理上可信的运动。

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

预定义动画​

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

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

标准函数​

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

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

附加函数​

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

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

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

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

示例​

参考

方法​

step0()​

tsx
static step0(n: number);

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

step1()​

tsx
static step1(n: number);

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

linear()​

tsx
static linear(t: number);

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

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

ease()​

tsx
static ease(t: number);

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

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

quad()​

tsx
static quad(t: number);

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

https://easings.net/#easeInQuad

cubic()​

tsx
static cubic(t: number);

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

https://easings.net/#easeInCubic

poly()​

tsx
static poly(n: number);

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

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

sin()​

tsx
static sin(t: number);

一个正弦函数。

https://easings.net/#easeInSine

circle()​

tsx
static circle(t: number);

一个圆形函数。

https://easings.net/#easeInCirc

exp()​

tsx
static exp(t: number);

一个指数函数。

https://easings.net/#easeInExpo

elastic()​

tsx
static elastic(bounciness: number);

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

默认弹跳度为 1，它会稍微过冲一次。0 弹跳度根本不会过冲，N > 1 的弹跳度将过冲大约 N 次。

https://easings.net/#easeInElastic

back()​

tsx
static back(s)

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

bounce()​

tsx
static bounce(t: number);

提供基本弹跳效果。

https://easings.net/#easeInBounce

bezier()​

tsx
static bezier(x1: number, y1: number, x2: number, y2: number);

提供三次贝塞尔曲线，等同于 CSS Transitions 的 transition-timing-function。

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

in()​

tsx
static in(easing: number);

以正向运行缓动函数。

out()​

tsx
static out(easing: number);

以反向运行缓动函数。

inOut()​

tsx
static inOut(easing: number);

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