Search code examples
javascriptcanvastweencreatejs

CreateJS: Unable to get tweening to work

So,

I'm just starting to learn CreateJS and I encountered my first problem: I can't get tweening to work (as I expect it should work).

Here is the example: http://www.hakoniemi.net/labs/createjs-test/

I want to get that cloud to move from right to left - at the moment it only jumps to the target.

The code looks:

 createjs.Tween.get(stack["cloud"]).to({"x":25}, 1000).call(test);

where createjs.Tween.get(stack["cloud"]) is valid and function test is executed. However there's no visual effect of 1000ms taking place at all.

I've looked through the tutorials and this is how things should work, but they're not. What am I doing wrong?

Edit: if I re-execute code in console with different value, then tweening and visual effect happens normally (here's a version where setTimeout is used: http://www.hakoniemi.net/labs/createjs-test/index2.html)

Solution

  • You have a type problem when setting the initial x value in 

    if (this.getAttribute("x")) {
  ref.x = this.getAttribute("x");
}

    The problem is that getAttribute() returns a string, which you can verify outputing Object.prototype.toString.call(ref.x). This way, it seems the first time the tween tries to run it can't do the proper math. In the end, it correctly updates the value to the end value as a number and that's why next calls to the same method work properly.

    You can fix this just by making sure that ref.x is a number. For example:

    if (this.getAttribute("x")) {
  ref.x = parseInt(this.getAttribute("x"));
}

    You can see it working in this fiddle.

    One last thing, BitmapImageLoaded is adding the assets to the stage as soon as they are loaded. If your clouds image gets loaded before the background, it will be placed under it and you won't be able to see them. (just in case :))