跳到主要内容
版本:0.81

缓动

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);

使任意缓动函数对称。缓动函数会在前半段时间正向运行,然后在剩余时间反向运行。