动画原理——颜色值处理

1.使用十六进制的颜色

有时候所提供颜色值的格式并不是你需要的，这时就需要进行转化。

//转为16进制颜色属性
var hexColor = '#' + (16733683).toString(16);
console.log(hexColor);
//转为10进制数字
var color = window.parseInt(hexColor.slice(1), 16);
console.log(color);

2.颜色合成

三原色红绿蓝，当我们想要获取紫色时，可以用红0xFF (255)，绿0x55(decimal 55)，蓝0xF3 (decimal 243)混合得到。但注意得到的结果是10进制的，需要转化才可以使用代码计算如下：

var color = 0xFF << 16 | 0x55 << 8 | 0xF3;

3.颜色提取

当你拥有一个颜色时，你想分解出三个基本色的色值，可以使用&，当对应位两个都为1结果才为1。

因为&的是在二进制下运算的。上述紫色的二进制为111111110101010111110011，从前到后，每8个二进制依次表示红绿蓝的色值，现在我们想获得蓝的色值。可以这样计算

111111110101010111110011 进行&运算

000000000000000011111111

代码是：

console.log(16733683&0x0000FF)

4.使用带透明度的颜色属性

这个比较麻烦，不再可以简单的#加色值，而是要构建这样的字符串"rgba(R, G, B, A)"，代码如下。

var r = 0xFF,
 g = 0x55,
 b = 0xF3,
 a = 0.2,
 color = "rgba(" + r + "," + g + "," + b + "," + a + ")";
console.log(color);

5.颜色工具

colorToRGB工具，转成rgb格式

utils.colorToRGB = function (color, alpha) {
 //if string format, convert to number
 if (typeof color === 'string' && color[0] === '#') {
 color = window.parseInt(color.slice(1), 16);
 }
 alpha = (alpha === undefined) ? 1 : alpha;
 //extract component values
 var r = color >> 16 & 0xff,
 g = color >> 8 & 0xff,
 b = color & 0xff,
 a = (alpha < 0) ? 0 : ((alpha > 1) ? 1 : alpha); //check range
 //use 'rgba' if needed
 if (a === 1) {
 return "rgb("+ r +","+ g +","+ b +")";
 } else {
 return "rgba("+ r +","+ g +","+ b +","+ a +")";
 }
};

parseColor转换颜色格式

utils.colorToRGB = function (color, alpha) {
 //if string format, convert to number
 if (typeof color === 'string' && color[0] === '#') {
 color = window.parseInt(color.slice(1), 16);
 }
 alpha = (alpha === undefined) ? 1 : alpha;
 //extract component values
 var r = color >> 16 & 0xff,
 g = color >> 8 & 0xff,
 b = color & 0xff,
 a = (alpha < 0) ? 0 : ((alpha > 1) ? 1 : alpha); //check range
 //use 'rgba' if needed
 if (a === 1) {
 return "rgb("+ r +","+ g +","+ b +")";
 } else {
 return "rgba("+ r +","+ g +","+ b +","+ a +")";
 }
};

　　console.log(utils.parseColor(0xFFFF00))
　　console.log(utils.parseColor(0xFFFF00,true))