嘿，刚好我之前处理过类似的需求，给你分几种常见的AE动画导出场景，对应不同的重放实现方案，都是不刷新页面只重放目标div里的动画：

这是目前Web端加载AE动画的主流方式，还原度高、支持交互，重放逻辑也最清晰。

首先确保你已经把AE动画导出为Lottie支持的JSON格式（用Bodymovin插件导出），然后按下面的代码实现：

<!-- 你的动画容器 -->
<div id="ANAnimation"></div>

<!-- 引入Lottie和jQuery（如果需要的话） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<script>
$(function() {
  // 初始化动画并保存实例，这一步很关键，后续重放要用到这个实例
  const animInstance = lottie.loadAnimation({
    container: document.getElementById('ANAnimation'),
    renderer: 'svg', // 可选svg/canvas/html，根据你的导出设置选
    loop: false,     // 如果默认不需要循环就设为false
    autoplay: true,  // 页面加载时自动播放
    path: './your-animation.json' // 替换成你的AE导出JSON文件路径
  });

  // 绑定点击事件实现重放
  document.getElementById("ANAnimation").onclick = function () {
    // 跳到第0帧并强制重新播放，即使动画正在运行也会重置
    animInstance.goToAndPlay(0, true);
  };
});
</script>

解释：goToAndPlay(0, true)是Lottie的核心API，第一个参数是起始帧，第二个true表示强制重置动画状态，确保每次点击都从开头完整播放。

如果你的AE动画是通过插件导出成CSS关键帧的形式，重放需要借助DOM的重绘机制：

<style>
/* 假设这是AE导出的动画类和关键帧 */
.ae-animation {
  animation: your-ae-animation 2.5s forwards;
}

@keyframes your-ae-animation {
  /* 这里是导出的关键帧内容，比如： */
  0% { transform: translateX(0); opacity: 0; }
  100% { transform: translateX(100px); opacity: 1; }
}
</style>

<div id="ANAnimation" class="ae-animation"></div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(function() {
  const animContainer = document.getElementById("ANAnimation");
  
  animContainer.onclick = function () {
    // 先移除动画类
    animContainer.classList.remove('ae-animation');
    // 强制浏览器触发重绘，否则直接加类不会重新播放动画
    void animContainer.offsetWidth;
    // 重新添加动画类，触发播放
    animContainer.classList.add('ae-animation');
  };
});
</script>

解释：浏览器对连续的类名移除/添加操作会做优化，直接操作可能看不到变化，void animContainer.offsetWidth会强制浏览器计算元素宽度，触发重排，这样重新添加类时就会重新执行动画。

如果是导出成GIF格式，重放需要通过重新加载GIF资源实现：

<div id="ANAnimation">
  <img id="anim-gif" src="./your-animation.gif" alt="AE动画">
</div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(function() {
  const animImg = document.getElementById("anim-gif");
  const originalSrc = animImg.src;
  
  document.getElementById("ANAnimation").onclick = function () {
    // 先清空src，再重新赋值，触发GIF重新加载播放
    animImg.src = '';
    animImg.src = originalSrc;
  };
});
</script>

解释：GIF本身如果是循环的话会自动重复，但如果需要点击才重放，通过重置src可以让浏览器重新加载并从头播放。

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