Search code examples
javascriptanimationthree.jsaframe

Correct way to call animation through and IF statement (A-Frame animation mixer)?


I am currently working with the animation mixer in A-Frame and am attempting to make a condition occur when a specific animation is playing (e.g. Animation 'B' out of A, B, C).

I'm unfamiliar with Javascript but I've made several attempts:

 if(character.getAttribute == character.getAttribute("animation-mixer", {clip: "B"}){
 //  Insert action here 
 }

 if(character == character.setAttribute("animation-mixer", {clip: "B"})){
 //  Insert action here
 };

 if(character.getAttribute("animation-mixer") == {clip: "B"}){
 //  Insert action here
 };

Solution

  • To retrieve component data You should just use getAttribute(componentName):

    // grabbing the component data object
    character.getAttribute("animation-mixer")
    
    // same + accessing the clip property
    character.getAttribute("animation-mixer").clip
    
    // checking if the property equals "B"
    if (character.getAttribute("animation-mixer").clip === "B") {
       console.log("Its B!")
    }
    

    setAttribute() will change the animation:

    setAttribute("animation-mixer", "clip", "A")
    // or character.setAttribute("animation-mixer", {clip: "B"})
    character.getAttribute("animation-mixer").clip // A