如何使用GSAP实现点击同一按钮触发并重启动画

核心思路 #

通过保存GSAP动画的引用，在按钮点击事件中调用GSAP内置的状态控制方法，实现点击同一按钮触发或重启动画的效果。

具体实现步骤 #

1. 定义并保存动画引用

创建动画时将其赋值给变量，方便后续控制状态。建议初始设置paused: true，避免页面加载时自动播放。

// 示例：创建一个元素滑入动画
let myAnimation = gsap.to(".animated-element", {
  x: 0,          // 目标X位置
  opacity: 1,    // 目标透明度
  duration: 1,   // 动画时长
  paused: true,  // 初始暂停
  ease: "power2.out" // 缓动效果
});

2. 绑定按钮点击事件

获取按钮元素，在点击回调中直接调用restart()方法——这个方法会自动将动画重置到初始状态并开始播放，无需额外判断状态，完美适配“点击即重启”的需求。

const triggerBtn = document.querySelector("#trigger-btn");
triggerBtn.addEventListener("click", () => {
  myAnimation.restart();
});

完整示例代码 #

<!-- 目标元素 -->
<div class="animated-element" style="width: 100px; height: 100px; background: #ff4444; transform: translateX(-200px); opacity: 0;"></div>
<!-- 触发按钮 -->
<button id="trigger-btn">触发/重启动画</button>

<!-- 引入GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
  // 初始化动画
  let myAnimation = gsap.to(".animated-element", {
    x: 0,
    opacity: 1,
    duration: 1,
    paused: true,
    ease: "power2.out"
  });

  // 绑定点击事件
  document.querySelector("#trigger-btn").addEventListener("click", () => {
    myAnimation.restart();
  });
</script>

额外状态控制选项 #

如果需要更精细的交互逻辑，可以结合以下GSAP方法：

• myAnimation.play()：继续播放暂停的动画
• myAnimation.pause()：暂停当前动画
• myAnimation.seek(0)：跳转到动画开头但不播放
• myAnimation.reverse()：反向播放动画

比如想实现“点击播放，再次点击重置”，可以在回调中判断动画进度：

triggerBtn.addEventListener("click", () => {
  if (myAnimation.progress() === 1) {
    // 动画已完成，重置并播放
    myAnimation.restart();
  } else {
    // 动画未完成，继续播放
    myAnimation.play();
  }
});

内容的提问来源于stack exchange，提问作者NAYMUR