使用Javascript在鼠标移动时两种颜色之间的转换

Question

如果屏幕的左半部分是一个特定的 rgb 值，而右半部分是另一个，如何在 mousemove 上在这两者之间平滑过渡取决于鼠标位置？

所以当鼠标在最左边时，它是一种颜色，而最右边是另一种颜色。中间就是中间点。

类似这样的东西：http://jsfiddle.net/j08691/BrZjJ/ - 但基于设定的颜色，而不是任意颜色。

var $el = $('div');

var p_x, p_y, 
    window_width = window.innerWidth, 
    window_height = window.innerHeight;

var m = {
        moving_left: false,
        moving_up: false,
        last_x: 0,
        last_y: 0,
        x: 0,
        y: 0
    };

var colors = {
        orange: { r: 238, g: 119, b: 0 },
        blue: { r: 40, g: 203, b: 215 }
    };

$el.on('mousemove', function(e){
    m.x = e.pageX;
    m.y = e.pageY;

    m.moving_left   = (m.x < m.last_x) ? true : false;
    m.moving_up     = (m.y < m.last_y) ? true : false;

    m.last_x = m.x;
    m.last_y = m.y;

});

function animateBackground() {
    p_width     = m.x / window_width;
    p_height    = m.y / window_height;

    p_x = p_width.toFixed(2);
    p_y = p_height.toFixed(2);

    switch(true) {
        // top left
        case p_x <= 0.5 && p_y <= 0.5:
            fr = colors.orange.r; 
            fg = colors.orange.g; 
            fb = colors.orange.b;
            break;

        // bottom right
        default:
            fr = colors.blue.r; 
            fg = colors.blue.g; 
            fb = colors.blue.b;
            break;
    }

    $el.css({
        backgroundColor: 'rgb('+fr+', '+fg+', '+fb+')'
    });

  requestAnimationFrame(animateBackground);

}

requestAnimationFrame(animateBackground);

https://jsfiddle.net/o32juay5/

我正在使用与上述类似的东西（除了在四个角上使用 4 种颜色，但为简单起见......）。我只是不知道如何在两种颜色之间转换......

有什么想法吗？

谢谢。

Answer 1

您需要根据鼠标位置以数学方式计算颜色。

对于每个R、G、B值：取两种颜色的值，确定它们之间的范围，根据鼠标位置在该范围内选择一个位置，并将它们组合成一个background-color来使用在 CSS 中。

https://jsfiddle.net/kbpyxxcn/6/

如果你想用这个方法用四种颜色，你的计算会变得更复杂，除非你也为中心定义一种颜色。

Answer 2

添加 CSS 属性 transition 就可以了：

https://jsfiddle.net/o32juay5/2/

div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -ms-transition: background-color 1s;
  -webkit-transition: background-color 1s;
  transition: background-color 1s;
}

如果你用 javascript 来做，性能会低于这个 css 属性。