Stepped Tween of Sprite "AS3 MovieClip style"

[Bricks4ever 0 Likes (Newbie)]

Hi

 

I am trying to obtain to things with a spritesheet:

1. Creating a fluid frame by frame animation using TimelineMax together with SteppedEase to tween css backgroundPosition
2. At the same time being able to programatically access the different "frames" in the animation like gotoAndStop in AS3 (see the input range in the pen)

I have obtained the 2 things in the codepen but I can't help thinking I am doing it the wrong way or at least overengineering it by calculating the individual "frame"'s time position. Is there a more straightforward way to solve my 2 problems? I am thinking in some kind of addframe functionality on a timeline.

 

Thank you!

See the Pen VLWvQx by klausgrundahl (@klausgrundahl) on CodePen

[Carl 9,066 Likes (Superhero)]

Thanks for the demo. Very nice.

 

First, I think what you have done already is perfectly fine. I would strongly recommend using steppedEase for simple spritesheet animations most of the time.

And nothing was really over-engineered from what I could see.

 

The only minor optimization I would suggest is combining your seek() and pause() like

tl.seek(3);
tl.pause();

can be

tl.pause(3)

Most of the control methods take a from parameter so you can do things like

play(1) // play from 1 second
reverse(3) // reverse from 3 seconds
play(-1) // play from 1 second before the end of the timeline

I'm not sure I understand exactly what you mean by addFrame, but an alternate approach to using SteppedEase is to create a loop that inserts a series of set()s (tweens with no duration). One advantage here is that you can more easily accommodate a spritesheet that is a grid or rows and columns. Another is that it would make it easy to insert frame labels so you could easily:

 

1. navigate to frame1
2. place a callback at frame6
3. tween from frame2 to frame3 tl.tweenFromTo("frame2", "frame6"); // TimelineMax only
4. add another tween or timeline at frame7

That sort of stuff. 

for(var i = 0; i < steps; i++){
    var frame = "frame" + i;  
    animationTL.set($eye, {backgroundPosition: '-' + width * (i) + 'px -0px'}, i * secondsPerFrame);
    animationTL.add("frame" + i)
    
    //just for show. generate buttons to jump to each frame of the animation
    var newBTN = $('<button id="' + frame + '">' + frame + '</button>').appendTo("#nav");
    newBTN.click(function(){
      animationTL.pause($(this).text());
    })
  }
  
  
  $("#btn").on("click", function(e) {
    animationTL.play(0);
  });


   $frameRange.on('input', function(){  
     animationTL.pause("frame" + this.value);
  })
   
  $("#tween").click(function(){
    animationTL.tweenFromTo("frame7", "frame3")
  })

Check out this demo: http://codepen.io/GreenSock/pen/MwoeXy?editors=001

 

Again, what you did was really fine.