CODEWITHSUNDEEP
javascriptanimationcreatejs
RasMason
RasMason

Reputation: 2212

Slowing down an animation tween

I've created a function that adds a graphic to the canvas stage and animates it via a tween, waits a few milliseconds then spawns another

There are a few things I could do with some help with,

firstly I need to slow down the assets to a stop after a few seconds of them playing at normal speed (I'm animating lines in the middle of a road)

secondly when the animation starts there's nothing on the screen,because they are road marking something has to display at start

and any ideas on how I remove each item when animation finished

Here's what I have so far

    //this is called from the tick handler
    function lines(){
    duration = 1000;
    spawnCounter--;
    console.log(spawnCounter)
    if(spawnCounter == 0){
    spawnCounter = sNum//20
    bolt = new lib.Bolt();
    bolt.x=280
    bolt.y = 120;
    bolt.rotation = -66;
    stage.addChild(bolt);
    createjs.Tween.get(bolt).to({x:0,y:0, scaleY:.6, scaleX:.6},duration)

            }
        }

Upvotes: 1

Views: 771

Answers (1)

Lanny
Lanny

Reputation: 11294

Removing items at the end of the tween is fairly simple:

createjs.Tween.get(bolt)
    .to({x:0,y:0, scaleY:.6, scaleX:.6}, duration)
    .call(function(event) {
        stage.removeChild(bolt);
    });

Slowing down the entire animation the way you have made it might be tricky, since you would probably want the assets to slow down at the same rate, so you can not just change the duration of the tween. You might want to consider NOT using a tween for the animation, and instead just controlling the "visible" items in the tick, and removing them when they get too far.

I created a quick sample showing how this could work. http://jsfiddle.net/wj15awj4/

  • Generate the items after a certain "distance" has elapsed
  • Remove items past the edge
  • Scale and alpha the items based on the position. The scale is kind of odd, since the road has no perspective. This would be better solved transforming the canvas using CSS or WebGL.

When the road is clicked, the "speed" is tweened down (or back up), and since the items are created based on how much "distance" has passed, they will continue to be created at roughly the same rate, despite moving slower over time.

Hope this helps!

Upvotes: 1

Related Questions