缓动
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);
使任意缓动函数对称。缓动函数会在前半段时间正向运行,然后在剩余时间反向运行。