JavaScriptSearch Tuesday, May 9, 2006; 05:48 AM
Belgian developer Philippe Maegerman has released a set of
JavaScript files that allow anyone to create fabulous tween effects,
resembling those usually seen in Flash. The files are freely available
for download, and there are detailed intructions and live demos at
http://jstween.blogspot.com/.
The tween effects are applied by
using six ready-made JavaScript scripts, each containing the code for
a separate class. The classes allow six distinct functionalities -
Tween, Color Tween, Opacity Tween, Text Tween, Parallel, and Sequence.
Anyone
who has used Adobe Macromedia Flash should be familiar with these, but
here is a short explanation: Tween moves a page element around, Color
Tween creates a transition of color, Opacity Tween gradually changes
the opacity of an object, Text Tween creates text effects, and the
Sequence and Parallel classes manage the simultaneous or linked usage
of other classes.
Here is, for example, an explanation of the Tween class usage:
The Tween class CONSTRUCTOR var t = new Tween(object,property,easing,start,end,duration,suffixe);
object: type:Object The
object you want to modify. It can be any object, a visual object that
you want to animate ( document.body.style ) or an anymous object ( new
Object() ). property: type:String The property that is updated on the target object, it can be empty ('') easing: type:Function The easing that will be applied to motion. start: type:Number Start value end: type:Number End value duration: type:Number Animation duration in seconds suffixe: type:String A string to append to the updated property ('%','pt','em' ...).
The actual code that makes the Tween example on the author's page work: <div id="sq" style="width:50px;height:50px;position:relative;left:0px;border:1px solid #333333;"></div> <input type="button" value="start()" onclick=" t1 = new tween (document.getElementById('sq').style,'left',Tween.elasticEaseOut,0,500,4,'px'); t1.start();"> <input type="button" onclick="t1.stop();" value="stop()"> <input type="button" onclick="t1.resume();" value="resume()"> <input type="button" onclick="t1.rewind();" value="rewind()"> <input type="button" onclick="t1.fforward();" value="fforward()">
The Motion Tween files are more lightweight than general purpose libraries like Prototype, and more focused in their functionality.
|