ant-design中colorPalette方法解析

方法的实际效果是，输入一个base color，通过输入参数1~5得到比base颜色浅一些的5种颜色，参数7-10可获得比base color深一些的颜色。

根据输入参数，执行方法：

    if (index <= 6) {
      return tinycolor.mix(
        '#ffffff',
        color,
        currentEasing * 100 / primaryEasing
      ).toHexString();
    }
    return tinycolor.mix(
      getShadeColor(color),
      color,
      (1 - (currentEasing - primaryEasing) / (1 - primaryEasing)) * 100
    ).toHexString();

这个过程可以理解为根据传入的最后一个参数，中和白色和base color。为了让输出的结果随着参数的变化，显得的更平滑，方法中引入了贝叶斯曲线。

image.png

其中p1和p2为两个基点，p0和p1的连线，以及p2和p3的连线是和曲线相切的，ant-design中采用的基点是：

BezierEasing(0.26, 0.09, 0.37, 0.18);

当传入不同的P1.x时，方法BezierEasing可输出曲线上对应的P1.y值。
上面方法中的

currentEasing * 100 / primaryEasing
其中currentEasing = BezierEasing(index * 0.1);//这里index为文章开始说道的参数，及@purple-1: color(~`colorPalette("@{purple-6}", 1)`);中的1
其中primaryEasing = BezierEasing(0.6);
这样就构造了tinycolor.mix方法中的amount参数

再细看tinycolor.mix时如何输出一个中间色的：

tinycolor.mix = function(color1, color2, amount) {
    amount = (amount === 0) ? 0 : (amount || 50);

    var rgb1 = tinycolor(color1).toRgb();
    var rgb2 = tinycolor(color2).toRgb();

    var p = amount / 100;

    var rgba = {
        r: ((rgb2.r - rgb1.r) * p) + rgb1.r,
        g: ((rgb2.g - rgb1.g) * p) + rgb1.g,
        b: ((rgb2.b - rgb1.b) * p) + rgb1.b,
        a: ((rgb2.a - rgb1.a) * p) + rgb1.a
    };

    return tinycolor(rgba);
};

• color1在index小于6的时候为白色#ffffff, index大于6的时候为getShadeColor返回的一个颜色（稍后再说），不是黑色
• color2为base color
• base color的rgba四个数值，分别根据传入的amout的参数，做上述运算，得到新的rgba
• 最后将新得到的rgba进行归零运算（相当于四舍五入，去掉多余的小数点位数）

再看获取深色时，构造出来的getShadeColor：

  var getShadeColor = function(c) {
    var shadeColor = tinycolor(c);
    // warm and cold color will darken in different radio, and rotate in different degree
    // warmer color
    if (shadeColor.toRgb().r > shadeColor.toRgb().b) {
      return shadeColor.darken(shadeColor.toHsl().l * warmDark * 100).spin(warmRotate).toHexString();
    }
    // colder color
    return shadeColor.darken(shadeColor.toHsl().l * coldDark * 100).spin(coldRotate).toHexString();
  }

我也没太明白，一个复杂的运算，将颜色先映射到HSL空间，最后将亮度空间按照变深的方向旋转一定角度，得到一个比原色深一些的颜色。将原色和这个深色带入tinycolor.mix方法中得到一个中间色。

基本思路就是这样。。