跳到主要内容

缓动

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

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

预定义动画

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

  • back 提供基本动画,对象会先稍微向后移动,然后向前移动
  • bounce 提供弹跳动画
  • ease 提供基本的惯性动画
  • elastic 提供基本的弹簧交互效果

标准函数

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

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

其他函数

以下方法提供了额外的数学函数:

  • bezier 提供三次 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);

提供三次 bezier 曲线,等同于 CSS Transitions 的 transition-timing-function

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


in()

React TSX
static in(easing: number);

使缓动函数正向运行。


out()

React TSX
static out(easing: number);

使缓动函数反向运行。


inOut()

React TSX
static inOut(easing: number);

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