Search code examples
javascripthtml5-animation

how to reverse animation in IMPACTJS


i am using ImpactJS to create a game on HTML5 and JS, when a animation is running, is it possble at any frame to reverse the animation frame flow (not flipping) ? I used rewind(), it only gets back to the first frame, is there any reverse()?


Solution

  • If you don't mind being a bit hacky something like this should, in theory, work:

    animation.sequence = animation.sequence.reverse(); //Reverse the animation
    animation.gotoFrame(animation.length - animation.frame - 1); //Set the frame to be the same frame as it was before.
    

    Basically the sequence property of the ig.Animation() class is what determines the order the frames are run, the update just iterates over them based on a timer. Reverse that and you reverse the animation. You can just use the same code again when you want to reset the animation to be forward.

    You may need to also do animation.rewind() instead of gotoFrame() if you want the full reversed animation to play out.

    Otherwise you could use 2 animations and use gotoFrame() when switching animations to start the correct frame. Also of note the code above will duplicate one frame of animation, you'd want to remove the -1 (looking at the source I think this will be okay in the case where frame = 0).