跳过主要内容

缓动效果

插件缓动

"slow", "rough",以及"expoScale"不属于核心库——它们被打包在一起以EasePack减小文件大小的 EasePack 文件中。"CustomEase", "CustomBounce",以及"CustomWiggle"也是单独打包的(不在核心库中)。

参考安装页面了解详情。


缓动是改变补间动画时间的主要方式。仅仅更改缓动就可以调整整个动画的感觉和个性。GSAP 中有无限多种缓动可以使用,因此我们创建了以下可视化工具来帮助您精确选择所需的缓动类型。

缓动可视化工具

值:0.00
进度:0.00
  • 添加点:ALT-点击线条
  • 切换平滑/角:ALT-点击锚点
  • 从角锚点获取手柄:ALT-拖动
  • 切换选择:SHIFT-点击锚点
  • 删除锚点:按 DELETE 键
  • 撤销:CTRL-Z

核心

none

Ease pack

额外缓动

// 点击可修改下划线值
gsap.to(目标对象, {
duration:,
ease:".",none",({
template:.none,
strength:,
points:,
taper:,
randomize:,
clamp:
})",
(,,)",(,)",()",(,)",()",create("custom", ""0""),create("myWiggle", {
wiggles:,
type:
}),
create("myBounce", {
strength:,
endAtStart:,
squash:,
squashID: "myBounce-squash"
}),
y:-500
rotation:360
x:"400%"
});
编程技巧 - 默认缓动

GSAP 的默认缓动为"power1.out"。您可以设置该补间的ease属性为另一个(有效的)缓动值来覆盖此默认设置。您可以通过使用gsap.defaults()来为 GSAP 设置不同的默认缓动。您也可以为特定的时间轴.

gsap.defaults({
ease: "power2.in",
duration: 1,
});

gsap.timeline({defaults: {ease: "power2.in"}})

如何使用缓动可视化工具

要使用缓动可视化工具,只需点击您想要使用的缓动名称即可。您还可以点击下划线文本以更改缓动的值和类型。
使用菜单左侧的导航链接了解有关复杂缓动的更多信息。

视频演示

非常感谢 Carl 提供这个视频。我们强烈推荐他们在 CreativeCodingClub.com 上提供的全面 GSAP 培训课程。CreativeCodingClub.com。今天就报名参加他们的免费 GSAP 课程并发现用代码进行动画制作的乐趣。

无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗