Line 33: The pause function is put straight into the html tag in this example.
Tuesday, 7 May 2013
TweenJS: Pausing Tweens
Line 33: The pause function is put straight into the html tag in this example.
Thursday, 2 May 2013
TweenJS: Changing Text
This isn't really tweening, just looping a text change.
Line 13: Because the text is center aligned, if you were to set its x property to 0, you would only see half the text.
Line 18: I have made the outline of the rectangle, and have not filled it in. I have also used to getMeasuredWidth/Height() to get the rough dimensions of the text - although what I really need is the dimensions of the text I will change it too, oh well...
Lines 19 and 20: Just positioning the box so it will be around the text.
Line 25: Changes the text after 1 second, no tweening involved. set() is used to change a property of the box, if you don't say which object is supposed to be affected, it assumes it is the object of the tween. Also, wait() is used because otherwise it loops back to the beginning so fast, you can't see the change. Please note, that the highlight box doesn't change back to invisible, this is because the original invisible setting is not part of the looping tween.
Line 13: Because the text is center aligned, if you were to set its x property to 0, you would only see half the text.
Line 18: I have made the outline of the rectangle, and have not filled it in. I have also used to getMeasuredWidth/Height() to get the rough dimensions of the text - although what I really need is the dimensions of the text I will change it too, oh well...
Lines 19 and 20: Just positioning the box so it will be around the text.
Line 25: Changes the text after 1 second, no tweening involved. set() is used to change a property of the box, if you don't say which object is supposed to be affected, it assumes it is the object of the tween. Also, wait() is used because otherwise it loops back to the beginning so fast, you can't see the change. Please note, that the highlight box doesn't change back to invisible, this is because the original invisible setting is not part of the looping tween.
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.
Subscribe to:
Posts (Atom)