CODEWITHSUNDEEP
javascripthtmlhtml5-canvastweencreatejs
Khazl
Khazl

Reputation: 125

TweenJS with Images

i have got a problem to animate a image from x=0 to x=400. i´m using easeljs and tweenjs. here is my code: Javascript:

<!doctype html>
<html>
<head>
    <title></title>
    <script src="js/easeljs-0.4.1.min.js"></script>
    <script src="js/tweenjs-0.2.0.min.js"></script>

    <script type="text/javascript">
        function init() {
            var canvas = document.getElementById("canvas");
            var stage = new Stage(canvas);
            var img=new Image();

            img.src="http://exampledomain.com/exampleimage.jpg";
            img.onload = function(e){
                var title = new Bitmap(e.target);
                stage.addChild(title);
                stage.update();
            }
            var tween = Tween.get(img).to({x:400},400).call(tweenComplete);
        }

        function tweenComplete(){
            alert('done');
        }
    </script>
</head>
<body onload="init();">
    <canvas id="canvas" width="430" height="446"></canvas>
</body>
</html>

im sure that the tween starts, because after 400ms opens the alert but the image doesn´t move one pixel.

Upvotes: 2

Views: 3286

Answers (3)

user3257581
user3257581

Reputation: 1

set the initial x,y coordinated of tile(image) from where you are going to animate it. use image object title as get(title) in spite of get(img) in tweening and also use a ticker for countinuous updation cretajs.Ticker.addEventListener('tick',function(){stage.update();})

Upvotes: 0

Lanny
Lanny

Reputation: 11294

You must animate your Bitmap, not the image inside of it. Store a reference to the Bitmap instance you create, and set the x/y of that instead.

Upvotes: 1

Chris Bowen - MSFT
Chris Bowen - MSFT

Reputation: 9839

Looks like a couple of minor things are conspiring to break the code.

First, a bit of a race condition. You properly create the Bitmap and add it to the Stage in the img.onload(), but the var tween = ... code right after it can run anytime, including before the Bitmap has been created/added.

Try moving the var tween = ... line to the end of your img.onload function and change the get(img) to get(title) so you can act on the Bitmap instead of the Image.

Finally, you need to get the Ticker moving so the Stage will update. Try something like this at the end of init():

Ticker.addListener(stage);

[Note for anyone using later versions of CreateJS, you'll need to namespace/prepend "createjs." to the uses of Stage, Bitmap, Ticker, etc.]

Upvotes: 1

Related Questions