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

　　推荐阅读

　　JavaScript入门教程(3) js面向对象

JavaScript 是使用“对象化编程”的，或者叫“面向对象编程”的。所谓“对象化编程”，意思是把 JavaScript 能涉及的范围划分成大大小小的对象，对象下面还继续划分对象直至非常详细为止，所有的编程都以对象为出发>>>详细阅读

本文标题：JS Tween 颜色渐变

地址：http://www.17bianji.com/kaifa2/JS/29043.html

 1/2    1