跳至主要內容

数学

yisky大约 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 );
上次编辑于: