跳到主要内容
版本:0.84

缓动

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

阶跃函数,对于任意大于 0 的 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 过渡中的 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);

使任意缓动函数变为对称。该缓动函数会在总时长的前半段正向运行,然后在剩余时长中反向运行。