数学

缓动函数

缓动函数（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 { getEasing } from '@tx3d/core';

// 获取二次方缓动函数
const fun = getEasing( 'easeInQuad' );

// 计算缓动结果，注意输入参数需要在[ 0~1 ]区间内
const result = fun( 0.5 );