Thursday, 2 May 2013
TweenJS: Adding Ease, With Ease...
Terrible pun, I know...
Line 8: I have added another source script, which contains the Ease functions
Line 15: Another way of calling the console
Lines 24 and 25: The third parameter in the to() function is the type of Ease you want to apply. This site is a good place to see the effect of different tweens: http://andysaia.com/blog/tweenjs/ and http://www.createjs.com/#!/TweenJS/demos/sparkTable
Line 15: Another way of calling the console
Lines 24 and 25: The third parameter in the to() function is the type of Ease you want to apply. This site is a good place to see the effect of different tweens: http://andysaia.com/blog/tweenjs/ and http://www.createjs.com/#!/TweenJS/demos/sparkTable
TweenJS: Overriding Tweens
If you create two tweens for a single object, they will both run together, and as long as you don't try to tween the same property at the same time, it should be fine.
If you want, you can override a tween, and two ways to do this are shown in lines 16 and 17 (on line 16, the fourth parameter of the get function is the override, the third is some kind of plugins object that I don't understand right now...).
On line 15, I have also shown a way to call the console, for the Flashers, this is like trace(). To see the calls to the console on Mozilla Firefox, go to Tools, Web Developer, Web Console.
Both of these tweens use the loop parameter, so that the animation keeps on going round and round.
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...
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 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...
Subscribe to:
Posts (Atom)