数学
大约 2 分钟基础知识教程数学
缓动函数
缓动函数(Easing Functions)用于控制动画的运动速度变化,常用的缓动函数如下表所示:
| 名称 | 描述 | 说明 |
|---|---|---|
| easeLinear | 线性匀速 | 无缓动效果 |
| easeInQuad | 二次方缓动 | 先慢后快 |
| easeOutQuad | 二次方缓动 | 先快后慢 |
| easeInOutQuad | 二次方缓动 | 前半段先慢后快,后半段先快后慢 |
| easeInCubic | 三次方缓动 | 先慢后快 |
| easeOutCubic | 三次方缓动 | 先快后慢 |
| easeInOutCubic | 三次方缓动 | 前半段先慢后快,后半段先快后慢 |
| easeInQuart | 四次方缓动 | 先慢后快 |
| easeOutQuart | 四次方缓动 | 先快后慢 |
| easeInOutQuart | 四次方缓动 | 前半段先慢后快,后半段先快后慢 |
| easeInQuint | 五次方缓动 | 先慢后快 |
| easeOutQuint | 五次方缓动 | 先快后慢 |
| easeInOutQuint | 五次方缓动 | 前半段先慢后快,后半段先快后慢 |
| easeInSine | 正弦曲线缓动 | 先慢后快 |
| easeOutSine | 正弦曲线缓动 | 先快后慢 |
| easeInOutSine | 正弦曲线缓动 | 前半段先慢后快,后半段先快后慢 |
| easeInExpo | 指数曲线缓动 | 先慢后快 |
| easeOutExpo | 指数曲线缓动 | 先快后慢 |
| easeInOutExpo | 指数曲线缓动 | 前半段先慢后快,后半段先快后慢 |
| easeInCirc | 圆形曲线缓动 | 先慢后快 |
| easeOutCirc | 圆形曲线缓动 | 先快后慢 |
| easeInOutCirc | 圆形曲线缓动 | 前半段先慢后快,后半段先快后慢 |
| easeInBack | 超过范围的三次方缓动 | 先慢后快 |
| easeOutBack | 超过范围的三次方缓动 | 先快后慢 |
| easeInOutBack | 超过范围的三次方缓动 | 前半段先慢后快,后半段先快后慢 |
| easeInElastic | 指数衰减的正弦曲线缓动 | 先慢后快 |
| easeOutElastic | 指数衰减的正弦曲线缓动 | 先快后慢 |
| easeInOutElastic | 指数衰减的正弦曲线缓动 | 前半段先慢后快,后半段先快后慢 |
| easeInBounce | 指数衰减的反弹缓动 | 先慢后快 |
| easeOutBounce | 指数衰减的反弹缓动 | 先快后慢 |
| easeInOutBounce | 指数衰减的反弹缓动 | 前半段先慢后快,后半段先快后慢 |
缓动曲线图:

使用:
import { easing } from '@fantasy3d/core';
// 获取二次方缓动函数
const fun = easing( 'easeInQuad' );
// 计算缓动结果,注意输入参数需要在[ 0~1 ]区间内
const value = fun( 0.5 );

