Timeline tweens properties not firing for the same object.

tomacadi commented 8 years ago

Hello,

Big fan of CreateJS. I have a small issue that I can't seem to figure out.

I have the following example:

timeline.addTween(
    createjs.Tween.get(circle).wait(0).to({alpha:0.5},2000), //it does not fade to 0.5, 
    createjs.Tween.get(circle).wait(2000).to({x:400},2000), 
    createjs.Tween.get(circle).wait(4000).to({alpha:0.1},2000) //only this tween fires
)

Tweenjs seems to override all other previous properties if I feed the same object in the timeline. It just keeps the last one.

I am feeding the tweens from a JSON. Chaining the tween makes it work but I am trying to avoid this so that I can have other tweens to other objects between the fades.

Any suggestions on this?

tomacadi commented 8 years ago


<!DOCTYPE html>
<html>
<head>
    <title>TweenJS: Canvas Tweening Example</title>

    <script type="text/javascript" src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

<script id="editable">
    function init() {
        stage = new createjs.Stage("canvas1");
        var timeline=new createjs.Timeline();

        var circle = new createjs.Shape();
        circle.graphics.beginFill("#FF0000").drawCircle(50, 50, 50);
        stage.addChild(circle);

        timeline.addTween(
            //circle should fadeTo 0.1 then back to 1
            //createjs.Tween.get(circle).wait(0).to({alpha:0.1},2000).wait(2000).to({alpha:1},2000) //works
            createjs.Tween.get(circle).wait(0).to({alpha:0.5},2000), //it does not fade to 0.5, 
            createjs.Tween.get(circle).wait(2000).to({x:400},2000), 
            createjs.Tween.get(circle).wait(4000).to({alpha:0.1},2000) //only this tween fires
        )

        timeline.setPaused(false);

        createjs.Ticker.setFPS(20);
        createjs.Ticker.addEventListener("tick", stage);
    }
</script>
</head>

<body onload="init();">
<canvas id="canvas1" width="960" height="350"></canvas>
</body>
</html>

tomacadi commented 8 years ago

Hello,

Used a simple for loop to fix this. [(http://stackoverflow.com/a/36115125/6081766)]

Adi

CreateJS / TweenJS

Timeline tweens properties not firing for the same object. #86