对循环内的项目一一运行动画 - Javascript

Question

我有一个这样的数组：

var myArray = array(
   [0] => array(
       [0]=>{reel:2, location:1}
       [1]=>{reel:1, location:7}
   )
   [1] => array(
       [0]=>{reel:2, location:1}
       [1]=>{reel:3, location:6}
       [2]=>{reel:1, location:5}
   )
);

需要在上述数组中的每个项目上放置动画，因此我在数组上运行 for 循环并在其中调用动画函数。

for(var j=0; j < myArray.length; j++){ 
     animateItems(myArray[j]);
}


function animateItems(params){
   for(var p = 0; p < params.length; p++){
           params[p].reelEl.animations.add('highlightAnim');
           params[p].reelEl.animations.play('highlightAnim', 13, true);
    }
}

但问题是所有项目动画同时发生，但我需要它们一个接一个。

试图做这样的事情但没有帮助：

for(var j=0; j < myArray.length; j++){ 
     (function() {
        setTimeout(function(){animateItems(myArray[j]);}, j * 1000);
     })(j);
}

似乎我做错了什么。任何想法将不胜感激。

Answer 1

您没有在 IIFE 签名中添加参数 (j)（因此在您的示例中，它仍然是来自 for 循环的 j 变量）：

for(var j=0; j < myArray.length; j++){ 
 (function(index) {
    setTimeout(function(){animateItems(myArray[index]);}, index * 1000);
 })(j);
}

这应该可行。

Answer 2

我认为，与其等待一段时间来完成动画。您可以使用回调onAnimationComplete 并执行递归函数。比如：

   var myArray = [[{ reel: 2, location: 1 },
    { reel: 1, location: 7 }],
    [{ reel: 2, location: 1 },
    { reel: 3, location: 6 },
    { reel: 1, location: 5 }]];

    function animation(x = 0, z = 0) {
      console.log(myArray[x][z])
      myArray[x][z].reelEl.animations.add('highlightAnim');
      myArray[x][z].reelEl.animations.play('highlightAnim', 13, true);

      myArray[x][z].reelEl.onComplete.add(function () { 
         if (myArray[x][z + 1]) {
              z++
            } else if (myArray[x + 1]) {
              x++
              z = 0;
            }else{
              return;
            }                
     animation(x, z) }, this);//<-- recursive callback     
    }

    animation();