Javascript 使用计数器循环动画（a帧动画混合器）？

我试图找到一种有效的方式来执行动画后，一个又一个动画播放“X”的次数

由于通过数组选择了随机动画，因此无法将我的动画编译为一个较长的GTLF/GLB动画

我遇到的问题是在代码完成后重复此代码

以下是我目前的做法：

// Counter (to determine when to execute multiple animations sequentially)
var counter = 0;

// No. counter needs to reach. Between 1 & 3 loops
function randomIntFromInterval(min, max) { 
   return Math.floor(Math.random() * (max - min + 1) + min);
};

var countertrigger = randomIntFromInterval(1,3);

// Default animation for Character
character.setAttribute("animation-mixer", {clip: "animationA"});

character.addEventListener('animation-loop', function () {
  if (character.getAttribute = character.getAttribute("animation-mixer", {clip: "animationA"})){
    counter++;

    if (counter === countertrigger){
      character.setAttribute("animation-mixer", {clip: "animationB"});

      character.addEventListener('animation-finished',function() {
        if (character.getAttribute("animation-mixer").clip === "animationB"){
          character.setAttribute("animation-mixer", {clip: "animationC"});

          character.addEventListener('animation-finished',function() {
            if (character.getAttribute("animation-mixer").clip === "animationC"){
              character.setAttribute("animation-mixer", {clip: "animationA"});

            // Resets idle counter
            counter = 0;

            // Resets/randomises the no. loops before next multiple animations execute  
            countertrigger = randomIntFromInterval(1,3);
            };
          });
        };
      }); 
    };
  };
});

---

每次发出

动画循环

，并且

计数器===计数器触发器

，都会为

动画完成

创建一个新的事件侦听器，您可能会以级联回调结束

有多种方法可以做到这一点，这里有一种方法：

• 保留一些助手（当前计数器、当前动画）
• 将逻辑保留在一个

  循环中

  回调-通过检查helper值来确定下一个循环中应该包含什么

大概是这样的：

---

//空闲周期计数器
var计数器=0；
//不，柜台需要打开。在1和3个循环之间
函数randomIntFromInterval（最小，最大）{
返回Math.floor（Math.random（）*（max-min+1）+min）；
};
var countertrigger=randomIntFromInterval（1,3）；
//动画助手
var animations=[“animationA”、“animationB”、“animationC”]
var-clipId=0；
//启动动画
setAttribute（“动画混合器”，{clip:animations[clipId}）；
//在每个动画循环中。。。
character.addEventListener（'animation-loop'，function（）{
//检查是否空闲，并且应该空闲更长时间
if（clipId==0&&counter

每个

动画循环

都会创建新的侦听器。是否希望循环（1/3）个周期的a，然后是B->C？是否有一个简单的模型出现故障以测试动画状态？

// idle cycle counter
var counter = 0;

// No. counter needs to reach. Between 1 & 3 loops
function randomIntFromInterval(min, max) { 
  return Math.floor(Math.random() * (max - min + 1) + min);
};
var countertrigger = randomIntFromInterval(1,3);

// animation helpers
var animations = ["animationA", "animationB", "animationC"]
var clipId = 0;

// start the animation
character.setAttribute("animation-mixer", {clip: animations[clipId});

// upon each animation loop...
character.addEventListener('animation-loop', function () {
  // check if idle, and should be idle longer
  if (clipId === 0 && counter < countertrigger) {
     counter++;
     return;
  }
  
  // check if this was the last animation
  if (clipId === (animations.length - 1)) {
     // Reset helpers
     clipId = 0;
     counter = 1; // the animation will be played once within this callback
     countertrigger = randomIntFromInterval(1,3);
  } else {
     clipId++
  }
  // play the next clip
  character.setAttribute("animation-mixer", {clip: animations[clipId]});
}