[英]Looping animations using a counter (A-Frame animation mixer)?
I am trying to find an efficient way to execute animations one after another after playing one animation "X" number of times.我试图找到一种在播放 animation "X" 次后一个接一个地执行动画的有效方法。
My animations cannot be compiled into one long GTLF/GLB animation due to random animations being selected through arrays.由于通过 arrays 选择了随机动画,我的动画无法编译成一个长 GTLF/GLB animation。
The issue I am encountering is repeating this code after it is completed.我遇到的问题是在完成后重复此代码。
Here is my current approach:这是我目前的方法:
// 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);
};
});
};
});
};
};
});
Each time animation-loop
is emitted and counter === countertrigger
, a new event listener is created for animation-finished
, and you probably end up with a cascade of callbacks.每次发送
animation-loop
和counter === countertrigger
时,都会为animation-finished
创建一个新的事件侦听器,您最终可能会得到一连串的回调。
There are multiple ways of doing this, here's one take:有多种方法可以做到这一点,这里有一种方法:
loop
callback - determining what should be in the next loop, by checking the helper values.loop
回调中 - 通过检查辅助值来确定下一个循环中应该是什么。 Something like this:像这样的东西:
// 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]});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.