JavaScript颜色渐变

进入本页就可以看到颜色渐变的效果，如果错过了刷新一下就可以了。

一直好奇颜色渐变是怎么做出来的，其实觉得应该没有拖拽难，只要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
	);
});
  1. 用javascript修改html元素的class
  2. JavaScript重定向
  3. JavaScript对象当作关联数组
  4. JavaScript弹出窗口以及窗口间的通信
  5. JavaScript显示信息实例
  6. 用JavaScript批量访问HTML元素
  7. 分离JavaScript与HTML
  8. JavaScript计算器实例
  9. JavaScript的Math对象计算器
  10. JavaScript改变HTML元素的位置
  11. JavaScript动画
  12. JavaScript动画函数
  13. JavaScript拖拽
  14. JavaScript拖拽2——多元素、分离JS
  15. JavaScript拖拽3——解决快速拖拽的问题
  16. addEventSimple函数，添加事件响应函数的方法
  17. addEventSimple观察鼠标事件
  18. JavaScript click事件深入
  19. JavaScript事件来源元素
  20. JavaScript修改与访问CSS
  21. JavaScript拖拽4——获得元素的位置
  22. JavaScript拖拽5——性能优化
  23. DOM Scripting相册
  24. DOM Scripting斑马表格
  25. DOM Scripting动画切图
  26. JavaScript颜色渐变
  27. JavaScript拖拽6——修复错误