嘿，这个问题我太熟悉了！AnimeJS 的属性回调函数（就是你写在 backgroundColor 后面的那个函数）只会在动画第一次初始化的时候执行一次，之后循环播放时不会再重新调用，所以颜色就固定住了，不会随循环变化。

问题原因 #

当你设置 loop: true 和 direction: 'alternate' 时，AnimeJS 会重复播放已初始化好的动画序列，不会重新执行那些生成属性值的回调，所以随机颜色只会生成一次，循环时自然不会变更。

解决方案 #

我们可以把随机颜色的逻辑抽成单独的函数，然后通过监听动画的 loopComplete 事件（每次循环完成时触发），动态更新动画的背景色目标值。这样每次循环都会生成新的随机颜色，完美解决问题。

步骤1：抽离随机颜色生成函数

function getRandomColor() {
  let letters = "3456789ABCDEF"; 
  let color = '#'; 
  for (let i = 0; i < 6; i++) 
    color += letters[Math.floor(Math.random() * 13)]; 
  return color;
}

步骤2：创建动画实例并监听循环事件

// 创建动画实例，方便后续控制
const textAnimation = anime({
  targets: '.jumperTexts',
  scale: [{ value: [0.5, 1], easing: 'easeInOutBounce', duration: 800 }],
  backgroundColor: getRandomColor(), // 初始随机颜色
  width: ['80px', '80px'],
  height: ['80px', '80px'],
  borderRadius: ['50%', '50%'],
  duration: 1200,
  endDelay: 1000,
  delay: anime.stagger(50),
  direction: 'alternate',
  loop: true,
  // 每次循环完成时触发这个回调，更新目标颜色
  loopComplete: function(anim) {
    anim.animations.forEach(animItem => {
      if (animItem.property === 'backgroundColor') {
        // 设置下一次动画的目标颜色为新的随机色
        animItem.toValue = getRandomColor();
      }
    });
  }
});

进阶：方向切换时更新颜色

如果你希望在每次动画方向切换（比如从正向变反向）时都更换颜色，可以改用 change 事件监听：

const textAnimation = anime({
  // ...保持其他配置不变
  change: function(anim) {
    // 检测到方向切换时更新颜色
    if (anim.direction !== anim.previousDirection) {
      anim.animations.forEach(animItem => {
        if (animItem.property === 'backgroundColor') {
          animItem.toValue = getRandomColor();
        }
      });
    }
  }
});

这样修改后，每次动画循环（或方向切换）时，都会重新生成随机颜色，背景色的过渡效果也会随着循环不断变化，完全符合你的预期啦！

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