javascript - 使用 jQuery 为图像序列制作动画的 gif 动画替代方案

Question

我将这个非常简单的 jQuery 代码放在一起来为一系列图像设置动画。它工作完美。你可以view it here 。

但现在我正在尝试更新代码，以便它可以同时处理多个图像序列，只要它有 jQuery 代码中引用的自己的类。所以我更新了它 - 请参阅下面。不幸的是我的更新不起作用。你们能帮我解决这个问题吗？预先感谢您!

let aniOne = $(".animation.first img");
let aniTwo = $(".animation.second img");
let currentImg = 0;

function changeImg(allImg){
  $(allImg[currentImg]).fadeOut(0, function(){
    
  if(currentImg == allImg.length -1){
    currentImg = 0;
  }else {
    currentImg++;
  }
    $(allImg[currentImg]).fadeIn(0)});
  
  
}

setInterval(changeImg(aniOne), 0050);

setInterval(changeImg(aniTwo), 0050);

.animation {
  width: 30%;
}

.animation img {
  display: none;
}

.animation img:first-of-type {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="animation first">
    <img src="http://s23.postimage.org/t57meexkb/horse_1.png">
    <img src="http://s23.postimage.org/i86apnasr/horse_2.png">
    <img src="http://s23.postimage.org/6kc8v3lnv/horse_3.png">
    <img src="http://s23.postimage.org/w4ej1j71n/horse_4.png">
    <img src="http://s23.postimage.org/ddclrdch7/horse_5.png">
    <img src="http://s23.postimage.org/nbxkdulwr/horse_6.png">
    <img src="http://s23.postimage.org/phrv8cpd7/horse_7.png">
    <img src="http://s23.postimage.org/n1un88wob/horse_8.png">
    <img src="http://s23.postimage.org/9yz0oz6gb/horse_9.png">
    <img src="http://s23.postimage.org/6gn0sl5kb/horse_10.png">
    <img src="http://s23.postimage.org/vnxwsu8ob/horse_11.png">
    <img src="http://s23.postimage.org/bhuetyd0r/horse_12.png">
    <img src="http://s23.postimage.org/imc82zka3/horse_13.png">
    <img src="http://s23.postimage.org/auvi4fg4r/horse_14.png">
</div>

<div class="animation second">
  <img src="https://i.imgur.com/5QGZklx.png">
  <img src="https://i.imgur.com/5QGZklx.png">
  <img src="https://i.imgur.com/i1oLaES.png">
</div>

Answer 1

正如 Chris G 上面所说:

The working code uses setInterval(changeImg, 50) which will work fine. The problem with your current attempt is setInterval(changeImg(aniOne), 50) which evaluates to a call to changeImg(aniOne), then a call to setInterval(undefined, 50) (since changeImg doesn't return anything). If you want this to work, you need to make changeImg into a function that returns a function. – Chris G

添加这些问题后，我们就遇到了两个动画共享 currentImg 变量的问题，因此我创建了两个不同的变量并将它们与图像一起传递。您可以通过多种不同的方式来处理这个问题。

let aniOne = $(".animation.first img");
let aniTwo = $(".animation.second img");
let num1 = 0;
let num2 = 0;

function changeImg(allImg, num){
  function main(){
    $(allImg[num]).fadeOut(0, function(){

    if(num == allImg.length -1){
      num = 0;
    }else {
      num++;
    }
      $(allImg[num]).fadeIn(0)});
  }
  return main;
}

setInterval(changeImg(aniOne, num1), 0050);

setInterval(changeImg(aniTwo, num2), 0050);

.animation {
  width: 30%;
}

.animation img {
  display: none;
}

.animation img:first-of-type {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="animation first">
    <img src="http://s23.postimage.org/t57meexkb/horse_1.png">
    <img src="http://s23.postimage.org/i86apnasr/horse_2.png">
    <img src="http://s23.postimage.org/6kc8v3lnv/horse_3.png">
    <img src="http://s23.postimage.org/w4ej1j71n/horse_4.png">
    <img src="http://s23.postimage.org/ddclrdch7/horse_5.png">
    <img src="http://s23.postimage.org/nbxkdulwr/horse_6.png">
    <img src="http://s23.postimage.org/phrv8cpd7/horse_7.png">
    <img src="http://s23.postimage.org/n1un88wob/horse_8.png">
    <img src="http://s23.postimage.org/9yz0oz6gb/horse_9.png">
    <img src="http://s23.postimage.org/6gn0sl5kb/horse_10.png">
    <img src="http://s23.postimage.org/vnxwsu8ob/horse_11.png">
    <img src="http://s23.postimage.org/bhuetyd0r/horse_12.png">
    <img src="http://s23.postimage.org/imc82zka3/horse_13.png">
    <img src="http://s23.postimage.org/auvi4fg4r/horse_14.png">
</div>

<div class="animation second">
  <img src="https://i.imgur.com/5QGZklx.png">
  <img src="https://i.imgur.com/5QGZklx.png">
  <img src="https://i.imgur.com/i1oLaES.png">
</div>