跳到主要内容
新架构实战课 实操 + 基建 + 原理全维度包揽,抢先掌握 React Native 新架构精髓 立即查看 >

Easing

Easing模块实现了常见的动画缓动函数。 这个模块被Animated.timing()用于在动画中传达真实可信的运动。

你可以在 http://easings.net/ 查看一些常见的缓动函数的视觉展示。

查看预置动画

Easing模块通过以下几个方法提供了几种预置的动画:

  • back 提供了一个简单的动画,物体在向前移动之前稍微往后退
  • bounce 提供了一个弹跳的动画效果
  • ease 提供了一个简单的惯性动画效果
  • elastic 提供了一个简单的弹簧交互效果

查看标准函数

目前提供了三种标准缓动函数:

poly 函数可用于实现四次方、五次方和其他更高阶的函数。

查看补充函数

此外还通过以下几个方法提供了几种数学函数:

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

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

  • in 正向运行缓动函数
  • inOut 使任何缓动函数对称化
  • out 反向运行缓动函数

示例


文档

方法

step0()

static step0(n: number);

一个步进函数,对于任何正数的n返回1。


step1()

static step1(n: number);

一个步进函数,如果n大于或等于1,则返回1。


linear()

static linear(t: number);

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

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


ease()

static ease(t: number);

使任何缓动函数成为对称的。缓动函数将在持续时间的前半部分向前运行,然后在剩余时间内向后运行。

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


quad()

默认的弹性为1,会稍微超过一次。0的弹性不会超过,而大于1的弹性将会超过N次。

http://easings.net/#easeInElastic


back()

static back(s)

Animated.parallel()一起使用,可以创建一个基本效果,在动画开始时对象会稍微向后移动。


bounce()

static bounce(t: number);

提供了一个基本的反弹效果。

http://easings.net/#easeInBounce


bezier()

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

提供了一个三次贝塞尔曲线,相当于CSS Transitions中的transition-timing-function

可以在 http://cubic-bezier.com/ 找到一个有用的工具来可视化三次贝塞尔曲线。


in()

static in(easing: number);

以正向运行缓动函数。


out()

static out(easing: number);

以反向运行缓动函数。


 inOut()

static inOut (easing:number);  

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