CreateJS / TweenJS

A simple but powerful tweening / animation library for Javascript. Part of the CreateJS suite of libraries.
http://createjs.com/
MIT License
3.56k stars 966 forks source link

Get all Tweens at once #107

Closed zogs closed 5 years ago

zogs commented 6 years ago

Hello,

Is there an easy way to get all tweens runing at once ? I want to apply to them a reduce timeScale property so my animation have an slowmo effect ! I managed to do it ( and it's looking great !) by manually collect all tween reference throughout my entire application, but it is hard to maintain... Maybe there is a simpler way ?

Thanks a lot, Simon

lannymcnie commented 5 years ago

There is currently no internal way to do this in 1.0. You can easily add/remove the tweens from a managed list yourself, which is pretty straightforward.

There is a new TweenGroup class available in GitHub (not rolled into an official release yet). Might be worth pulling down the NEXT version and trying it out. It has a timeSync. Here are the docs:

TweenGroup allows you to pause and time scale a collection of tweens or timelines. For example, this could be used to stop all tweens associated with a view when leaving that view.

myView.tweens = new createjs.TweenGroup();
myView.tweens.get(spinner, {loop: -1}).to({rotation:360}, 500);
myView.tweens.get(image).to({alpha: 1}, 5000);

// ... make all tweens in this view run in slow motion:
myView.tweens.timeScale = 0.1;

// ... pause all this view's active tweens:
myView.tweens.paused = true; // stop all tweens.

You can add a group to another group to nest it.

viewTweenGroup.add(buttonTweenGroup);

Tweens are automatically removed from the group when they complete (ie. when the complete event fires).

zogs commented 5 years ago

Very nice ! TweenGroup looks great :)

Thank you very much, i'll try it

lannymcnie commented 5 years ago

Closing this for now. Feel free to re-open or follow up if TweenGroup doesn't work for you.