数学
大约 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 );