EkoLabs / aframe-spritesheet-component

Animated spritesheet support for A-Frame
Other
34 stars 5 forks source link

AFrame has dropped support for Tween, example with anime.js #13

Open netgfx opened 3 years ago

netgfx commented 3 years ago

After some hours I was able to animate a spritesheet correctly with anime.js. I'm leaving this here in case it helps someone.

function animateBlast() {
    var target = document.querySelector("#blastObj");
    var animation = {
      targets: "#blastObj sprite-sheet",
      progress: [0, 1], // from 0 to 1
      duration: 240,
      autoplay: true,
      easing: "linear",
      direction: "normal",
      loop: false,
      update: function(anim) {
        target.setAttribute("sprite-sheet", "progress", Math.round(anim.progress)/100);
      },
      begin: function(anim) {
        target.setAttribute("visible", true);
      },
      complete: function(anim) {
        target.setAttribute("sprite-sheet", "progress", 0);
      }
    };

    var tween = new AFRAME.ANIME(animation)
  }
netgfx commented 3 years ago

If you want me to make a PR modifying the examples I'll be happy to.