Question

我正在尝试制作西蒙说的游戏。我有一个迭代数组的函数。每个数字都与一个动作相关联（因此适当的按钮动画）。当序列只有1个值长时，这可以正常工作，但是它们都只是一次播放。我已经找到了在迭代之间设置延迟但是没有找到包含if / else语句的for循环的方法。

我尝试了一个找到here的解决方案：

function show_sequence() {
    var k = right_seq.length;

    //assign each button a number
    //when the loop goes over it that button's animation plays
    (function animation(i) {
            setTimeout(function() {
            if (i == 1) { 
                setTimeout(function() {
                    TweenMax.from("#pink", 0.6, {opacity:0.3, scale:0.8, ease:Elastic.easeOut});
                    one.play();
                }, 1000);
            } else if (i == 2) {
                setTimeout(function() {
                    TweenMax.from("#blue", 0.6, {opacity:0.3, scale:0.8, ease:Elastic.easeOut});
                    two.play();
                }, 1000);
            } else if (i == 3) {
                setTimeout(function() {
                    TweenMax.from("#yellow", 0.6, {opacity:0.3, scale:0.8, ease:Elastic.easeOut});
                    three.play();
                }, 1000);
            } else {
                setTimeout(function() {
                    TweenMax.from("#green", 0.6, {opacity:0.3, scale:0.8, ease:Elastic.easeOut});
                    four.play();
                }, 1000);
            }; //end for loop
            if (--i) {
                animation(i);
            }
        }, 200);
})(k);
}

它的工作原理是它在动画和声音之间增加了延迟，但它没有以正确的顺序播放它们。例如，如果数组是[3,4,1,2]，它不会将动画放在这些按钮上，而是以[4,3,2,1]顺序放置，并且它不会超过4轮。

这是fiddle，但游戏尚未结束，所以我不知道它是否会有所帮助。按绿色的小圆圈开始/继续添加回合。

Answer 1

不使用所有这些计时器，而是使用方法staggerFrom，这将为您做延迟。要使系列从right_seq数组生成，请将该数组转换为元素名称列表：

function show_sequence() {
    var k = right_seq.length;
    var circles = right_seq.map(function (num) {
        return ['#pink','#blue','#yellow','#green'][num-1];
    });
    // this will apply the animation in sequence
    TweenMax.staggerFrom(circles, 0.6, {opacity:0.3, scale:0.8, ease:Elastic.easeOut}, 0.6);
}

现在您已经拥有了这个，您可能需要查看动画本身，因为此方法会立即将所有受影响的元素设置为其初始样式，但是会以“交错”延迟执行动画。

如果不能解决问题，请使用onComplete属性实现循环：

function show_sequence() {
    var circles = right_seq.map(function (num) {
        return ['#pink','#blue','#yellow','#green'][num-1];
    });
    (function loop(i) {
        if (i>=circles.length) return;
        TweenMax.from(circles[i], 0.6, {
            opacity:0.3, scale:0.8, ease:Elastic.easeOut, 
            onComplete: loop.bind(this,i+1)
        });
    })(0);
}

Answer 2

这是一个快速修复。你可以做很多事情来改善它，但这应该会让你超越目前的障碍。

问题在于你根本没有使用你的序列。你传递给show_sequence的数字只是数组的长度 - 你正在递减（这是4,3,2,1来自的地方）。你实际上从来没有从序列数组中得到按钮索引

function show_sequence() {
  var k = right_seq.length;

  //assign each button a number
  //when the loop goes over it that button's animation plays
  (function animation(i) {
    if (i >= right_seq.length) {
      return;
    }
    setTimeout(function() {
      if (right_seq[i] == 1) {
        setTimeout(function() {
          TweenMax.from("#pink", 0.6, {
            opacity: 0.3,
            scale: 0.8,
            ease: Elastic.easeOut
          });
          one.play();
        }, 1000);
      } else if (right_seq[i] == 2) {
        setTimeout(function() {
          TweenMax.from("#blue", 0.6, {
            opacity: 0.3,
            scale: 0.8,
            ease: Elastic.easeOut
          });
          two.play();
        }, 1000);
      } else if (right_seq[i] == 3) {
        setTimeout(function() {
          TweenMax.from("#yellow", 0.6, {
            opacity: 0.3,
            scale: 0.8,
            ease: Elastic.easeOut
          });
          three.play();
        }, 1000);
      } else {
        setTimeout(function() {
          TweenMax.from("#green", 0.6, {
            opacity: 0.3,
            scale: 0.8,
            ease: Elastic.easeOut
          });
          four.play();
        }, 1000);
      }; //end for loop
      animation(++i);
    }, 200);
  })(0);
}

延迟具有if / else语句的for循环中的迭代

2 个答案: