跳到主要内容
版本:0.82

缓动

Easing 模块实现了常见的缓动函数。该模块由 Animated.timing() 使用,用于在动画中传达符合物理直觉的运动效果。

你可以在 https://easings.net/ 查看一些常见缓动函数的可视化效果

预定义动画

Easing 模块通过以下方法提供了若干预定义动画:

  • back 提供一种基础动画:对象在向前移动之前会先轻微后退
  • bounce 提供一种弹跳动画
  • ease 提供一种基础的惯性动画
  • elastic 提供一种基础的弹簧交互效果

标准函数

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

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

其他函数

以下方法提供了其他数学函数:

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

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

  • in 正向运行一个缓动函数
  • inOut 使任何缓动函数都具有对称性
  • out 反向运行一个缓动函数

示例


参考

方法

step0()

React TSX
static step0(n: number);

一种阶梯函数,对于任何正值 n 都返回 1。


step1()

React TSX
static step1(n: number);

一种阶梯函数,当 n 大于或等于 1 时返回 1。


linear()

React TSX
static linear(t: number);

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

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


ease()

React TSX
static ease(t: number);

一种基础的惯性交互,类似于物体缓慢加速到某个速度。

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


quad()

React TSX
static quad(t: number);

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

https://easings.net/#easeInQuad


cubic()

React TSX
static cubic(t: number);

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

https://easings.net/#easeInCubic


poly()

React TSX
static poly(n: number);

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

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


sin()

React TSX
static sin(t: number);

一种正弦函数。

https://easings.net/#easeInSine


circle()

React TSX
static circle(t: number);

一种圆形函数。

https://easings.net/#easeInCirc


exp()

React TSX
static exp(t: number);

一种指数函数。

https://easings.net/#easeInExpo


elastic()

React TSX
static elastic(bounciness: number);

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

默认弹性系数为 1,会稍微超出一次。弹性系数为 0 时完全不会超出,而弹性系数为 N > 1 时会大约超出 N 次。

https://easings.net/#easeInElastic


back()

React TSX
static back(s)

Animated.parallel() 配合使用,可创建一种效果:动画开始时对象会轻微向后回弹。


bounce()

React TSX
static bounce(t: number);

提供一种基础的弹跳效果。

https://easings.net/#easeInBounce


bezier()

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

提供一条三次贝塞尔曲线,等同于 CSS Transitions 的 transition-timing-function

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


in()

React TSX
static in(easing: number);

正向运行一个缓动函数。


out()

React TSX
static out(easing: number);

反向运行一个缓动函数。


inOut()

React TSX
static inOut(easing: number);

使任何缓动函数都具有对称性。缓动函数会在前半段时长内正向运行,然后在剩余时长内反向运行。