Jump to content
Search Community

How animate sprite image in canvas?

aleksoft test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

  • Like 3
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...