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

Question

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

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

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

Looping animations using a counter (A-Frame animation mixer)?

javascript

animation

three.js

aframe