实现无缝循环背景动画：从JavaScript到CSS的优化实践

let x = 0;
let x2 = 2400; // 假设背景图片宽度为2400px

function animateFullBackground(speed: number) {
    // 清除上一帧内容
    ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

    // 绘制两张背景图片
    for (let layer of background) { // background是一个图片数组，此处假设只有一个图层
        ctx.drawImage(layer, x, 0);
        ctx.drawImage(layer, x2, 0);
    }

    // 调试输出坐标
    console.log(x, x2);

    // 核心逻辑：判断图片是否完全移出左侧，并重置其位置
    // 注意：这里的判断和更新顺序是关键，也容易出错
    if (x < -2400) {
        x = 2400; // 将第一张图片移到第二张图片右侧
    }

    if (x2 < -2400) {
        x2 = 2400; // 将第二张图片移到第一张图片右侧
    }

    // 更新坐标，使图片向左移动
    x -= speed;
    x2 -= speed;

    // 请求下一帧动画
    requestAnimationFrame(animateFullBackground);
}

// 假设 CANVAS_WIDTH, CANVAS_HEIGHT, ctx, background 等已定义
// animateFullBackground(1); // 以速度1开始动画

/* 容器，用于裁剪超出部分 */
.wrapper-div {
  overflow: hidden; /* 隐藏超出容器的内容 */
  width: 100vw; /* 示例：全视口宽度 */
  height: 750px; /* 示例：容器高度 */
  position: relative; /* 确保背景元素相对于此定位 */
}

/* 承载背景图片的元素 */
.your-background-image {
  /* 设置背景图片，并允许水平重复 */
  background: url('../../../../public/images/game/land620.png') repeat-x;
  height: 750px; /* 背景图片自身的高度 */
  /*
   * 宽度设置：这里可以设置为图片原始宽度的倍数，
   * 比如一张图片宽620px，设置为 7680px (620 * 12)，
   * 这样在动画过程中，用户能看到多张重复的图片，
   * 动画的平移距离可以设计为图片宽度的整数倍，以实现完美循环。
   */
  width: 7680px; /* 示例：背景图片总宽度，可以是单张图片宽度的N倍 */

  /* 核心动画属性 */
  animation: slide 12s linear infinite; /* 应用名为 'slide' 的动画，持续12秒，线性，无限循环 */
}

/* 定义动画关键帧 */
@keyframes slide {
  0% {
    /* 动画开始时，背景元素的初始位置 */
    transform: translate(0px, 310px); /* 示例：X轴平移0，Y轴平移310px (可选的Y轴动画) */
  }
  100% {
    /* 动画结束时，背景元素的位置 */
    /*
     * 这里的 X 轴平移距离应为单张背景图片宽度的负整数倍，
     * 例如，如果单张图片宽620px，平移 -1240px (即 -620 * 2)，
     * 这样动画从0%到100%刚好平移了两张图片的距离，实现完美循环。
     * Y轴平移保持一致或根据需要变化。
     */
    transform: translate(-1240px, 310px); /* 示例：X轴平移-1240px，Y轴平移310px */
  }
}