有31中缓动算法,实现了颜色的自动转换(#f00 #ff0000 rgb(255,0,0)格式到颜色运算格式,最后返回#ff0000格式)、px单位的自动转换。
调用接口:
/**
* 对外接口
* tween的示例
* @param startprops 开始属性,单个属性或者数组
* @param endprops 结束属性,单个属性或者数组
* @param timeseconds 运动消耗时间,单位秒
* @param animtype 动作类型,字符串型,内部自己转换算子
* @param delay 延迟时间,多长时间后开始运动,单位秒
*/
window.rtween = function(startprops, endprops, timeseconds, animtype, delay)
{
var tw = new tween();
tw.start(startprops, endprops, timeseconds, animtype, delay);
return tw;
}
示例如下:
http://img.jb51.net/online/tween.htm
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); } } }
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]
选择列表里面的缓动算法,点前面的按钮,就会以想对的缓动算法运动
源代码: http://img.jb51.net/jslib/jquery/rtween.js
核心代码:
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)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._starttimervar 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) {
this._currentprops[i] = this._endprops[i];
isend = true;
}
}
//
if(isend)this.stop();
else this.calllistener();
}