Skip to content

Easing is possibly the most important part of motion design. A well-chosen ease will add personality and breathe life into your animation.

官方文档有ease函数预览器,快去看

ease函数命名:<ease_func>.<in/inOut/out>

简要介绍:(图片所选例子默认以in结尾,除非没有)

注意,是函数曲线,不是运动轨迹

补充:缓出动画如"power1.out"最适合用于界面过渡;它们启动迅速,有助于使界面感觉响应灵敏,然后在结束时逐渐减速,给人一种自然的摩擦感。

Core

none

直线动画,

power[1-4]

幂函数曲线,下面两张分别是1和4的

back

后撤步然后前进

bounce

跳跃加力

circle

1/4圆弧

elastic

有弹性的

expo

exp,阶级函数

sine

正弦函数,in结束是[0,pi/4],inOut是[0,pi/2]

steps(n)

n次阶跃/阶梯函数

以下Ease效果需要额外安装

Extra Ease(2025free了!)

CustomEase

自定义,通过SVG路径描述(乐

javascript
// click to modify the underlined values
gsap.to(target, {
duration:2.5,
ease: CustomEase.create("custom", "M0,0,C0.173,0,0.247,1,0.247,1,0.247,1,0.271,1,0.271,1,0.271,1,0.308,0.51,0.416,0.51,0.502,0.51,0.566,1,0.566,1,0.566,1,0.578,1,0.578,1,0.578,1,0.606,0.783,0.664,0.783,0.71,0.783,0.753,1,0.753,1,0.753,1,0.758,1,0.758,1,0.758,1,0.776,0.913,0.809,0.913,0.836,0.913,0.862,1,0.862,1,0.862,1,0.865,1,0.865,1,0.865,1,0.874,0.968,0.895,0.968,0.912,0.968,0.927,1,0.927,1,0.927,1,0.927,1,0.927,1,0.927,1,0.932,0.989,0.945,0.989,0.956,0.989,0.964,1,0.964,1,0.964,1,0.964,1,0.964,1,0.964,1,0.967,0.997,0.975,0.997,0.982,0.997,0.986,1,0.986,1,0.986,1,0.986,1,0.986,1,0.986,1,0.988,0.999,0.993,0.999,0.997,0.999,1,1,1,1"),
y: -250
});

CustomBounce

自定义弹性

javascript
// click to modify the underlined values
gsap.to(target, {
duration:2.5,
ease: CustomBounce.create("myBounce", {
strength:0.7,
endAtStart:false,
squash:1,
squashID: "myBounce-squash"
}),
y: -250
});

CustomWiggle

自定义晃动

javascript
// click to modify the underlined values
gsap.to(target, {
duration:2.5,
ease: CustomWiggle.create("myWiggle", {
wiggles:10, // 晃动力度
type:easeInOut
}),
y: -250
});