使用计数器循环动画（A-Frame 动画混合器）？答案

【问题标题】：Looping animations using a counter (A-Frame animation mixer)?使用计数器循环动画（A-Frame 动画混合器）？
【发布时间】：2020-11-16 17:39:54
【问题描述】：

我正在尝试找到一种有效的方法来在播放一个动画“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);
            };
          });
        };
      }); 
    };
  };
});

【问题讨论】：

每个animation-loop 都会创建新的侦听器。你想要一个循环（1/3）循环的 A，然后是 B->C？你有一个简单的模型来测试动画状态吗？

标签： javascript animation three.js aframe

【解决方案1】：

每次发出animation-loop 和counter === countertrigger 时，都会为animation-finished 创建一个新的事件侦听器，您最终可能会得到一连串的回调。

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

保留一些助手（当前计数器、当前动画）
将逻辑保留在一个 loop 回调中 - 通过检查帮助程序值来确定下一个循环中的内容。

类似这样的：

// 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]});
}

【讨论】：