缓动效果
插件缓动
"slow", "rough",以及"expoScale"不属于核心库——它们被打包在一起以EasePack减小文件大小的 EasePack 文件中。"CustomEase", "CustomBounce",以及"CustomWiggle"也是单独打包的(不在核心库中)。
参考安装页面了解详情。
缓动是改变补间动画时间的主要方式。仅仅更改缓动就可以调整整个动画的感觉和个性。GSAP 中有无限多种缓动可以使用,因此我们创建了以下可视化工具来帮助您精确选择所需的缓动类型。
缓动可视化工具
值:0.00
- 添加点:ALT-点击线条
- 切换平滑/角:ALT-点击锚点
- 从角锚点获取手柄:ALT-拖动
- 切换选择:SHIFT-点击锚点
- 删除锚点:按 DELETE 键
- 撤销:CTRL-Z
// 点击可修改下划线值
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 课程并发现用代码进行动画制作的乐趣。