Wednesday, 1 May 2013

TweenJS: How to add a script and make a circle move

So, I struggled with this quite a bit, because I thought it would be pretty much the same as EaselJS, in terms of adding the script, so I tried to use the 'lib/tweenjs-0.4.0.min.js' file, but then I couldn't get anything to work.

The examples that come with the TweenJS files use various js scripts in the src folder, when I tried adding those, like the example, I could get something to actually work.

The readme file in the lib folder says that it should work, but I couldn't get it to... I've probably misunderstood something.

Line 6 shows the added script that I couldn't get to work.
Line 7 adds the EaselJS script, I believe this is necessary for the ticker
Line 8 is the basic Tween.js file, but there are other js file in the src folder with additional functionality. I think later additions overwrite previous ones if they have anything similarly named in them.

Line 16 is the line that does the tweening, in this case, a very basic one. these kinds of tweens can be 'chained' apparently - so you tell it what you want to tween with the get function, and then you add on a chain of commands.
wait() tells it how long to wait, in milliseconds.
to() takes the properties that it should end up with over a period of time, with the first parameter being an object with all the different properties.

Line 18 adds the ticker event, which I find a little confusing, because I thought the second parameter when adding the tick event should be a function that gets called, and includes the stage.update(), but this does work, so...

No comments:

Post a Comment

Please enter your message here...