Easing
Easing
模块实现了常见的动画缓动函数。 这个模块被Animated.timing()用于在动画中传达真实可信的运动。
你可以在 http://easings.net/ 查看一些常见的缓动函数的视觉展示。
查看预置动画
Easing
模块通过以下几个方法提供了几种预置的动画:
查看标准函数
目前提供了三种标准缓动函数:
poly
函数可用于实现四次方、五次方和其他更高阶的函数。
查看补充函数
此外还通过以下几个方法提供了几种数学函数:
以下辅助函数用于修改其他缓动函数。
示例
- javascript
- typescript
文档
方法
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);
使任何缓动函数对称。 缓动函数将在持续时间的前半部分正向运行,然后在剩余时间内反向运行。