JavaScript实现颜色渐变
摘要：一直好奇颜色渐变是怎么做出来的，其实觉得应该没有拖拽难，只要setTimeout就可以了，然后用变化的rgb组装出来一个颜色就可以了。恰好，最近在读《JavaScript DOM高级程序设计》的时候
一直好奇颜色渐变是怎么做出来的，其实觉得应该没有拖拽难，只要setTimeout就可以了，然后用变化的rgb组装出来一个颜色就可以了。恰好，最近在读《JavaScript DOM高级程序设计》的时候，在第五章的最后有一个fadeColor函数，也就是本页使用的函数，可惜书上没有注释。自己读了读代码，觉得代码在延时控制上肯定有问题，不过回家一调试，发现还是自己思维定势了。决定好好地分析一下这个函数。
实例JavaScript代码
//所有代码的执行时间只有24毫秒左右。
function fadeColor( from, to, callback, duration, totalFrames) {
//用一个函数来包裹setTimeout，根据帧数来确定延时
function doTimeout(color,frame) {
setTimeout(function() {
try {
callback(color);
} catch(e) {
JSLog.write(e);
}
}, (duration*1000/totalFrames)*frame);
//总持续秒数/每秒帧数*当前帧数=延时(秒)，再乘以1000作为延时(毫秒)
}
// 整个渐变过程的持续时间，默认为1秒
var duration = duration || 1;
// 总帧数，默认为持续秒数*15帧，也即每秒15帧
var totalFrames = totalFrames || duration*15;
var r,g,b;
var frame = 1;
//在第0帧设置起始颜色
doTimeout('rgb(' + from.r + ',' + from.g + ',' + from.b + ')',0);
//计算每次变化所需要改变的rgb值
while (frame < totalFrames+1) {
r = Math.ceil(from.r * ((totalFrames-frame)/totalFrames)
+ to.r * (frame/totalFrames));
g = Math.ceil(from.g * ((totalFrames-frame)/totalFrames)
+ to.g * (frame/totalFrames));
b = Math.ceil(from.b * ((totalFrames-frame)/totalFrames)
+ to.b * (frame/totalFrames));
// 调用本frame的doTimeout
doTimeout('rgb(' + r + ',' + g + ',' + b + ')',frame);
frame++;
}
}
整个代码并不是“一个setTimeout接着一个setTimeout”，而是在一个循环中设置好所有的setTimeout，第一个延时10毫秒，第二个延时20毫秒……
另外，原来的代码中有一个变量名实在是误导，framePerSecond实际上是总帧数，而并非每秒帧数，我已经把变量名改为totalFrames。
fadeColor接受5个参数，前两个是起始颜色和结束颜色，都是一个由r、g、b三个属性组成的颜色对象。第三个参数callback是实际起作用的函数。第四个参数duration是渐变效果要持续的时间。最后一个参数totalFrames是总帧数。
测试代码
function addEventSimple(obj,evt,fn){
if(obj.addEventListener){
obj.addEventListener(evt,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+evt,fn);
}
}
addEventSimple(window,'load',function(){
fadeColor(
{r:0,g:255,b:0}, //star color
{r:255,g:255,b:255}, //end color
function(color) {
document.getElementById("content").style.backgroundColor = color;
},
3
);
});
演示:
