How animate sprite image in canvas?

[aleksoft 1 Likes (Newbie)]

How to animate a sprite images in canvas using GSAP as in this tutorial is shown?

[Rodrigo 2,662 Likes (Superhero)]

Hi and welcome to the Greensock forums.

 

Is there any particular reason to do it in canvas?

 

You can see a very neat non-canvas example here:

 

See the Pen aJcGl by jamiejefferson (@jamiejefferson) on CodePen

 

See the Pen lykFn by jamiejefferson (@jamiejefferson) on CodePen

 

If doing it in canvas is required, you could take a look at GSAP's KineticJS plugin in order to get the tutorial code to work with GSAP.

 

Rodrigo.

[Carl 9,066 Likes (Superhero)]

Hi and welcome.

 

Unfortunately I don't have time at the moment to convert all that code for you, but keep in mind that GSAP can animate any numeric property of any JavaScript object.

 

In general terms you could create a TweenLite that tweens the frameIndex of a Sprite object with an onUpdate callback that could call the render method.

[aleksoft 1 Likes (Newbie)]

I did the animation only with GSAP ( http://cdpn.io/hsdLI ) , but I would like to show me how to do with KineticJS plugin in canvas same animation with this options.

[PawleyBoboli 10 Likes (Newbie)]

I did the animation only with GSAP ( http://cdpn.io/hsdLI ) , but I would like to show me how to do with KineticJS plugin in canvas same animation with this options.

 

Hi Alek,

Your sample worked for me and I was able to adapt it to other sprite sheets of different sizes and sprite counts.

 

All good... but I don't understand WHY it works.  Mostly, I don't understand the 3rd line added to the timeline.  It seems that the 2nd call resets the image back to it's original position after the first call finishes all the steps, but I'm not sure why that first call is appended again after the reset to the timeline.

 

Actually, I'd love a breakdown of how this whole thing works if anyone has a moment:

function vertBarAnim() {
    // vertbarsSprite_20.png
    var vertbarTL = new TimelineMax({repeat : -1, repeatDelay : -1});
    vertbarTL.to("#vertBarAnim", 0.9, {backgroundPosition : "-1701px 0", ease : SteppedEase.config(81)});
    vertbarTL.set("#vertBarAnim", {backgroundPosition : "0 0"});
    vertbarTL.to("#vertBarAnim", 0.9, {backgroundPosition : "-1701px 0", ease : SteppedEase.config(81)});
    
    vertbarTL.play();
    vertbarTL.timeScale(0.3);
}

Thanks,

-Kevin