Easing
Easing
模块实现了常用的缓动函数。此模块被 Animated.timing()
使用,以便在动画中传递物理上可信的运动。
您可以在 https://easings.net/ 找到一些常用缓动函数的可视化效果
预定义的动画
Easing
模块通过以下方法提供几种预定义的动画
标准函数
提供了三个标准缓动函数
poly
函数可用于实现四次、五次和其他更高次幂函数。
附加函数
以下方法提供了附加的数学函数
以下辅助函数用于修改其他缓动函数。
示例
- TypeScript
- JavaScript
参考
方法
step0()
static step0(n: number);
一个步进函数,对于 n
的任何正值都返回 1。
step1()
static step1(n: number);
一个步进函数,如果 n
大于或等于 1,则返回 1。
linear()
static linear(t: number);
一个线性函数,f(t) = t
。位置与经过的时间一对一相关。
https://cubic-bezier.com/#0,0,1,1
ease()
static ease(t: number);
一个基本的惯性交互,类似于物体缓慢加速到速度。
https://cubic-bezier.com/#.42,0,1,1
quad()
static quad(t: number);
一个二次函数,f(t) = t * t
。位置等于经过时间的平方。
https://easings.net/#easeInQuad
cubic()
static cubic(t: number);
一个三次函数,f(t) = t * t * t
。位置等于经过时间的立方。
https://easings.net/#easeInCubic
poly()
static poly(n: number);
一个幂函数。位置等于经过时间的 N 次幂。
n = 4: https://easings.net/#easeInQuart n = 5: https://easings.net/#easeInQuint
sin()
static sin(t: number);
一个正弦函数。
https://easings.net/#easeInSine
circle()
static circle(t: number);
一个圆形函数。
https://easings.net/#easeInCirc
exp()
static exp(t: number);
一个指数函数。
https://easings.net/#easeInExpo
elastic()
static elastic(bounciness: number);
一个基本的弹性交互,类似于弹簧来回振荡。
默认的弹力为 1,会稍微超调一次。0 弹力根本不会超调,而弹力 N > 1 将超调约 N 次。
https://easings.net/#easeInElastic
back()
static back(s)
与 Animated.parallel()
一起使用,以创建当动画开始时对象稍微向后动画的基本效果。
bounce()
static bounce(t: number);
提供基本的弹跳效果。
https://easings.net/#easeInBounce
bezier()
static bezier(x1: number, y1: number, x2: number, y2: number);
提供三次贝塞尔曲线,等同于 CSS Transitions 的 transition-timing-function
。
一个可视化三次贝塞尔曲线的有用工具可以在 https://cubic-bezier.com/ 找到
in()
static in(easing: number);
向前运行缓动函数。
out()
static out(easing: number);
向后运行缓动函数。
inOut()
static inOut(easing: number);
使任何缓动函数对称。缓动函数将在持续时间的一半内向前运行,然后在剩余的持续时间内向后运行。