There are 31 in the easing algorithm, the implementation of the automatic color conversion (#f00 #ff0000 RGB (255,0,0) format to the color operation format, the final return #ff0000 format), PX unit of the automatic conversion.
Call Interface:
/**
* External interface
* Example of Tween
* @param startprops start attribute, single attribute or array
* @param endprops End Property, single attribute or array
* @param timeseconds motion consumption time, unit seconds
* @param animtype action type, string type, internal self conversion operator
* @param delay delay time, how long to start the movement, Unit seconds
*/
Window.rtween = function (Startprops, Endprops, Timeseconds, Animtype, delay)
{
var tw = new Tween ();
Tw.start (Startprops, Endprops, Timeseconds, animtype, delay);
return TW;
}
Examples are as follows:
Http://img.jb51.net/online/Tween.htm
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <script src=" http://img.jb51.net/jslib/ Jquery/jquery-1.2.6.js "type=" Text/javascript "></script> <script src=" http://img.jb51.net/jslib/ Jquery/rtween.js "type=" Text/javascript "></script> </pead> <body> <div> <input type = "button" value= "Alpha2" onclick= "alpha2 ()"/> <input type= "button" value= "Color2" onclick= "Color2 ()"/> <input type= "button" value= "Bgcolor2" onclick= "Bgcolor2 ()"/> <input "button" type= "value=" width2 "Width2 ()"/> <input type= "button" value= "left2" onclick= "left2 ()"/> <select size= "1" id= "tweentypes Elect "name=" select "></select> </div> <div id= ' t ' > function alpha2 () {var t = Rtween (1,0,1,type); T.run = functIon (PS) {$ (' #t '). CSS (' opacity ', PS); } T.complete = function () {Rtween (0,1,1,type). Run = function (PS) { $ (' #t '). CSS (' opacity ', PS); }} </div> <script>//var t = Rtween (0,0,0.1); var typeshtml = '; for (var i in t.animtypes) {typeshtml+= ' <option> ' +i+ ' </option> '; } $ (' #tweentypeSelect '). HTML (typeshtml); var tag = $ (' #tweentypeSelect ') [0]; var type = Tag.options[tag.selectedindex].text; $ (' #tweentypeSelect '). Change (function () {type = Tag.options[tag.selectedindex].text; }); function Alpha2 () {var t = Rtween (1,0,1,type); T.run = function (PS) {$ (' #t '). CSS (' opacity ', PS); } T.complete = function () {Rtween (0,1,1,type). Run = function (PS) { $ (' #t '). CSS (' opacity ', PS); }} function Color2 () {var t=rtween (' #t '). CSS (' color '), ' #ff0000 ', 1,type); T.run = function (PS) {$ (' #t '). CSS (' color ', PS); T.complete = function () {rtween (' #t '). CSS (' color '), ' #ccc ', 1,type). Run = function (PS) {$ (' #t '). CSS (' color ', PS); }} function Bgcolor2 () {var t=rtween (' #t '). CSS (' backgroundcolor '), ' #ff0000 ', 1,type) ; T.run = function (PS) {$ (' #t '). CSS (' backgroundcolor ', PS); } T.complete = function () {rtween (' #t '). CSS (' backgroundcolor '), ' #0000ff ', 1,type). Run = f Unction (PS) {$ (' #t '). CSS (' backgroundcolor ', PS); }} function Width2 () {var t = Rtween ($ (' #t '). CSS (' width '), ' 200px ', 1,type); T.rUN = function (PS) {$ (' #t '). CSS (' width ', PS); T.complete = function () {rtween (' #t '). CSS (' width '), ' 500px ', 1,type). Run = function (PS) {$ (' #t '). CSS (' width ', PS); }} function left2 () {var t = Rtween ($ (' #t '). Offset (). left+ ' px ', ' 500px ', 1,type); T.run = function (PS) {$ (' #t '). CSS (' left ', PS); T.complete = function () {rtween (' #t '). CSS (' left '), ' 10px ', 1,type). Run = function (PS) {$ (' #t '). CSS (' left ', PS); }} </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Select the easing algorithm in the list, the button in front of the point, you will be the right to the easing algorithm movement
Source code: Http://img.jb51.net/jslib/jquery/rtween.js
Core code:
function Tween ()
{
this._frame=20;
//
This._animtype = linear;
This._delay = 0;
//
This.run = function () {}
This.complete = function () {}
}
//
Tween.prototype.getValue = function (prop)
{
This._valuetype = ";
if (Prop.constructor = = Array) return prop;
//
if (typeof (prop) = = ' String ')
{
if (IsColor (prop))
{
This._valuetype = ' color ';
Return C2A (prop);
}
if (prop.split (' px '). length>1)
{
This._valuetype = ' px ';
return [Prop.split (' px ') [0]];
}
}
return [prop];
}
Tween.prototype.setValue = function (prop)
{
if (This._valuetype = = ' Color ') return a2c (prop);
if (This._valuetype = = ' px ') return prop[0]+ ' px ';
return prop;
}
Tween.prototype.start = function (Startprops, Endprops, Timeseconds, Animtype, delay)
{
if (animtype!= undefined) this._animtype = This.animtypes[animtype];
if (delay!= undefined) this._delay = delay;
//
This._timeseconds = Timeseconds;
This._starttimer = new Date (). GetTime () + this._delay * 1000;
//
This._endprops = This.getvalue (endprops);
This._startprops = This.getvalue (startprops);
This._currentprops = [];
//
var $this = this;
Clearinterval (This._runid);
This._runid = SetInterval (
function () {$this. _run ();}
, this._frame);
}
Tween.prototype.stop = function (state)
{
for (var i in this._startprops)
{
if (number (state) >0)
This._currentprops[i] = this._endprops[i];
else if (number (state) <0)
This._currentprops[i] = this._startprops[i];
}
This.calllistener ();
This.complete ();
//
Clearinterval (This._runid);
}
Tween.prototype.callListener = function ()
{
This.run (This.setvalue (this._currentprops));
}
Tween.prototype._run = function ()
{
if (new Date (). GetTime ()-this._starttimer< 0) return;
var isend = false;
//
for (var i in this._startprops)
{
This._currentprops[i] = This._animtype (new Date (). GetTime ()-this._starttimer,number (this._startprops[i)), Number ( This._endprops[i])-number (This._startprops[i]), this._timeseconds * 1000);
//
if (This._starttimer + (this._timeseconds * 1000) <= new Date (). GetTime ())
{
This._currentprops[i] = this._endprops[i];
Isend = true;
}
}
//
if (isend) this.stop ();
else This.calllistener ();
}
