跳到主要内容

缓动（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 不会超出，大于 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 过渡中的 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);

使任何缓动函数对称运行。缓动函数在持续时间的前半段正向运行，后半段反向运行。