JS Tween color gradient_javascript skills

There are 31 easing algorithms, which realize automatic conversion of colors (#f00 #ff0000 rgb(255,0,0) format to color calculation format, and finally return to #ff0000 format) and automatic conversion of px units.
Calling interface:
/**
* External interface
* Example of Tween
* @param startProps Start property, single property or array
* @param endProps End property, single property or array
* @param timeSeconds Movement consumption Time, unit second
* @param animType action type, string type, internal conversion operator
* @param delay delay time, how long to start movement, unit second
*/
window.rtween = function(startProps, endProps, timeSeconds, animType, delay)
{
var tw = new Tween() ;
tw.start(startProps, endProps, timeSeconds, animType, delay);
return tw;
}
The example is as follows:
http://img.jb51.net /online/Tween.htm

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]<script> // var t = rtween(0,0,0.1); var typeshtml = ''; // for(var i in t.animTypes) { typeshtml+='<option>'+i+''; } $('#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 = function(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>
Select the easing algorithm in the list, click the button in front, and the movement will be based on the desired easing algorithm

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();
}