求助：使用jQuery和anime.js实现页面加载器for循环动画未生效

嘿，别担心，新手遇到这种异步动画的问题太正常啦！我来帮你理清楚怎么用anime.js实现带循环的加载器动画～

首先得搞明白：普通的for循环没法直接实现你想要的“一轮接一轮”动画，因为anime.js的动画是异步执行的——for循环会瞬间跑完所有迭代，把所有动画都塞进队列里，结果就是动画混乱，或者看起来根本没循环。

下面给你两种实用的解决方案，根据你的需求选就行：

方案1：无限循环动画（最简单） #

如果你的加载器需要一直循环直到页面加载完成，直接用anime.js自带的loop属性就好，不用自己写循环逻辑：

HTML结构 #

<div class="loader">
  <span>.</span>
  <span>.</span>
  <span>.</span>
</div>

JavaScript代码 #

// 先确保已经引入了jQuery和anime.js，顺序是先jQuery后anime.js
anime({
  targets: $('.loader span'), // 用jQuery选择器没问题，anime.js支持
  translateY: [-10, 0], // 点从上方10px落到原位
  opacity: [0.5, 1], // 透明度从半透到完全显示
  delay: anime.stagger(200), // 每个点依次延迟200ms，形成逐个跳动的效果
  duration: 600, // 单个点的动画时长
  easing: 'easeInOutQuad', // 缓动效果，让动画更自然
  loop: true // 关键！开启无限循环
});

方案2：指定次数的循环动画 #

如果需要动画只循环N次（比如3次），可以用递归函数+计数器的方式，在每一轮动画结束后触发下一轮：

JavaScript代码 #

let currentLoop = 0;
const totalLoops = 3; // 你想要循环的次数

function runLoader() {
  anime({
    targets: $('.loader span'),
    translateY: [-10, 0],
    opacity: [0.5, 1],
    delay: anime.stagger(200),
    duration: 600,
    easing: 'easeInOutQuad',
    complete: function() {
      currentLoop++;
      // 还没到指定次数就继续递归调用
      if (currentLoop < totalLoops) {
        runLoader();
      } else {
        // 循环结束后的操作，比如隐藏加载器
        $('.loader').fadeOut();
        console.log('加载器动画完成啦');
      }
    }
  });
}

// 启动动画
runLoader();

关键提醒 #

1. 脚本引入顺序要对：先引入jQuery，再引入anime.js，不然anime.js没法识别jQuery选择器。
2. 别用普通for循环直接触发动画：因为for是同步执行的，会一次性把所有动画都触发，根本等不到上一轮结束，自然看不到“循环”的效果。

这样调整后，你的加载器动画应该就能正常循环执行啦～

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