TweenLite AS3: ease:Linear.easeNone doesn't work

Question

In the function below I try to throw random items (generated by the function generateItem() ) on the stage and let them move from outside the right side of the stage to just out of the left side. This works fine but the only problem is that ease:Linear.easeNone in the TweenLite.to function doesn't work. The items keep going fast in the beginning and slow at the end of the animation. Here is the code:

private function timerHandler(event:TimerEvent):void{
    //item handling
    if(gameTimer.currentCount % 4 === 0){
    var item:MovieClip = generateItem();
    arrItems.push(item);

    for each(item in arrItems){
        TweenLite.to(item,5,{x:-(item.width - 1), ease:Linear.easeNone});
        trace(item + " ----- " + item.x);
        if(item.x < -(item.width)){
            arrItems.splice(arrItems.indexOf(item),1);
            stage.removeChild(item);
        }
    }
}

score 0 · Answer 1 · answered Nov 13 '12 at 16:52

What is going on here is that you are overriding your tweens again and again inside the for each loop. Once you have set up a tweening animation for an object with TweenLite.to you don't need to set it again for that same object, unless you want to override it with a new tween.

The reason you see the end of the animation going slower is because the distance the object has to move until the final point of the tweening animation is less (since it has already covered some of it), but the total duration of the animation is still 5 seconds. Speed = distance/time, so same time but shorter distance = slower tweening.

You can fix this by just moving the TweenLite.to call outside of the loop, so only one tween will be set up for each item. Another improvement I recommend for your code is to use the onComplete callback function of TweenLite to avoid that costly for each loop inside your timeHandler function, and remove the item only after the tweening has completed, unless you need to iterate through all items for some other reason than to just check if the tweening has ended.

For example:

private function timerHandler(event:TimerEvent):void
{
  //item handling
  if(gameTimer.currentCount % 4 === 0)
  {
    var item:MovieClip = generateItem();

    arrItems.push(item);

    //only call once for each item
    TweenLite.to(item,5,{ x:-(item.width - 1), 
                          ease:Linear.easeNone,
                          onComplete: removeItem,
                          onCompleteParams:[item]
                         });

  }

}

private function removeItem(item:MovieClip):void
{
  arrItems.splice(arrItems.indexOf(item),1);
  stage.removeChild(item);
}

Hope this helps!

TweenLite AS3: ease:Linear.easeNone doesn't work

1 Answers1