本文旨在解决在使用 GSAP (GreenSock Animation Platform) 创建动画时，绝对定位元素出现位置偏移的问题。通过将旋转动画与主时间线分离，并使用 `setTimeout` 函数延迟执行，确保主时间线完成后再启动旋转动画，从而避免因元素重复动画导致的定位错误。
在使用 GSAP 创建复杂动画时，尤其是涉及到绝对定位的元素，可能会遇到元素位置错乱的问题。这通常是由于多个动画同时作用于同一个元素，导致其定位属性受到干扰。本文将介绍一种有效的解决方案，通过分离动画时间线和延迟执行，来避免此类问题。
问题分析
在提供的示例中，.sun 类别的图片元素使用绝对定位，并同时受到两个 GSAP 时间线的影响：
- 主时间线：控制 main 和 footer 元素的初始动画。
- 旋转动画：控制 .sun 元素的旋转。
当两个动画同时运行时，.sun 元素的定位可能会受到干扰，导致其垂直方向上的居中失效。
解决方案：分离时间线与延迟执行
解决此问题的关键在于将旋转动画从主时间线中分离出来，并确保它在主时间线完成后再开始执行。这可以通过以下步骤实现：
创建独立的旋转动画时间线： 使用 gsap.to() 方法创建一个独立的动画，专门负责 .sun 元素的旋转。
使用 setTimeout 延迟执行： 将旋转动画的启动代码包裹在 setTimeout 函数中。setTimeout 函数允许我们在指定的延迟时间后执行代码。延迟时间应略大于主时间线的持续时间，以确保主时间线完成后再启动旋转动画。
示例代码
以下是修改后的 JavaScript 代码：
gsap
.timeline()
.from(["main", "footer"], { y: "10%", autoAlpha: 0 })
.then(() => {
// 主时间线完成后执行
setTimeout(() => {
gsap.to(".sun", {
scrollTrigger: {
trigger: ".wavySectionContainer",
scrub: true,
},
rotation: 360,
duration: 2,
ease: "none",
});
}, 100); // 延迟 100 毫秒
});代码解释：
- gsap.timeline().from(...)：创建主时间线，控制 main 和 footer 元素的动画。
- .then(() => { ... }): 确保主时间线完成后执行回调函数。
- setTimeout(() => { ... }, 100)：延迟 100 毫秒后执行旋转动画。这个延迟时间可以根据主时间线的持续时间进行调整。
- gsap.to(".sun", { ... })：创建旋转动画，使用 scrollTrigger 实现滚动触发。
注意事项
- 延迟时间： 延迟时间的选择至关重要。如果延迟时间过短，旋转动画可能仍然会在主时间线完成之前启动，导致问题依旧存在。如果延迟时间过长，可能会影响用户体验。建议根据实际情况进行调整。
- 时间线管理： 在复杂的动画场景中，合理管理 GSAP 时间线非常重要。可以使用 gsap.timeline() 创建嵌套的时间线，并使用 add() 方法将动画添加到时间线中。
总结
通过分离动画时间线和延迟执行，可以有效地解决 GSAP 动画中绝对定位元素位置偏移的问题。这种方法确保了动画的执行顺序，避免了元素属性的冲突，从而实现了更稳定、更可控的动画效果。在开发复杂的 GSAP 动画时，建议采用类似的方法来管理动画，以提高代码的可维护性和可扩展性。
