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

How can I use milliseconds in tween when I add MovieClip to stage? #39

Closed paveliko closed 9 years ago

paveliko commented 10 years ago

Hi,

I need to use milliseconds in animations in my movie clips. I try to pass { useTicks: false } param to get method of Tween object but it's not working.

I want to use milliseconds instead of 40 ticks. How can I do it?

var stage = new createjs.Stage("canvas");
createjs.Ticker.addEventListener("tick", stage);

var mc = new createjs.MovieClip(null, 0, true);
stage.addChild(mc);

var shape= new createjs.Shape(new createjs.Graphics().beginFill("#999999").drawCircle(100, 100, 100));
mc.timeline.addTween(createjs.Tween.get(shape).to({x:0}).to({x:760}, 40).to({x:0}, 40));

mc.gotoAndPlay(0);
danielocdh commented 9 years ago

If using milliseconds isn't possible, is there a way to make the animation move through frames based on time instead of render speed? I want the animation to show at same speed regardless of device FPS

gskinner commented 9 years ago

Timeline & tweens support time based animation, but at present MovieClip does not. This is mainly because Flash Pro (which is the primary use of MovieClip), only really supports a frame-based paradigm.

However, we recognized the need for time-synching MovieClip instances, and added support for it via the .framerate property (also available on Sprite), which keeps your clip running at that framerate regardless of the real-world framerate.

The tricky part of using it is that it has to be set on each MovieClip individually, it isn't inherited by child clips (unless they are in Graphic mode). I recently built a work around in AdHelper though, which you could grab. I'll be looking at building something similar into the library as well.

https://github.com/CreateJS/html5ads/blob/master/AdHelper/AdHelper.js#L283 http://createjs.com/html5ads/#Duration

I'm going to close this, and add an issue for the global setting specifically. I'm also open to feedback if you think MovieClip should support time based animations directly - it shouldn't be crazy hard to add if there's a genuine use case.