缓动函数
本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →
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);
使缓动函数对称执行：前半个周期正向运行，后半个周期反向运行。