第35章 React Native Easing 模块：缓动函数与预定义动画详解
版本：0.77
Easing
Easing 模块实现了常用的缓动函数。Animated.timing() 会使用这个模块，让动画呈现出符合物理直觉的运动效果。
常见缓动函数的可视化示例可以在 https://easings.net/ 查看。
预定义动画
Easing 模块通过以下方法提供了几种预定义动画：
back：对象在向前移动前会先稍微后退 bounce：弹跳动画 ease：基础惯性动画 elastic：基础弹簧动画
标准函数
提供三种标准缓动函数：
linear quad cubic
poly 函数可用于实现四次方、五次方及其他更高次幂的函数。
附加函数
以下方法提供了额外的数学函数：
bezier：三次贝塞尔曲线 circle：圆形函数 sin：正弦函数 exp：指数函数
以下辅助方法用于修饰其他缓动函数：
in：正向执行缓动函数 inOut：使任意缓动函数对称 out：反向执行缓动函数
示例
TypeScript
JavaScript
参考
方法
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 TSXstatic exp(t: number);
指数缓动函数。 https://easings.net/#easeInExpo
elastic()
React TSXstatic elastic(bounciness: number);
基本的弹性交互效果，类似弹簧来回振荡。默认 bounciness 为 1，会轻微回弹一次；bounciness 为 0 则不会回弹；bounciness 大于 1 时大约会回弹 N 次。 https://easings.net/#easeInElastic
back()
React TSXstatic back(s)
配合 Animated.parallel() 使用，在动画开始时让对象轻微回拉，产生基本的回弹效果。
bounce()
React TSXstatic bounce(t: number);
提供基本的弹跳效果。 https://easings.net/#easeInBounce
bezier()
React TSXstatic bezier(x1: number, y1: number, x2: number, y2: number);
提供三次贝塞尔曲线，等价于 CSS Transitions 中的 transition-timing-function。 可在 https://cubic-bezier.com/ 找到可视化工具。
in()
React TSXstatic in(easing: number);
正向执行缓动函数。
out()
React TSXstatic out(easing: number);
反向执行缓动函数。
inOut()
React TSXstatic inOut(easing: number);
使缓动函数对称。前半段时长正向执行，后半段时长反向执行。
