javascript - 如何创建 flex 的渐变？

Question

我正在使用 Javascript 对 snake 进行编程。对于不同 body 部位的背景，我使用以下渐变生成:

gibGradient: function() {
    var string = "background: linear-gradient(to right, rgba(243,226,199,1) 15%,rgba(193,158,103,1) "+ snake.data.gradientLinks +"%,rgba(182,141,76,1) "+ snake.data.gradientRechts +"%,rgba(233,212,179,1) 90%);";
    if ((snake.data.gradientLinks < 85) && (snake.data.modus == "hochzaehlen")) {
        snake.data.gradientLinks = snake.data.gradientLinks + 5;
        snake.data.gradientRechts = snake.data.gradientRechts + 5;
        if (snake.data.gradientLinks >= 85) {
            snake.data.modus = "runterZaehlen";
        }
    }

    if ((snake.data.gradientLinks > 20) && (snake.data.modus == "runterZaehlen")) {
        snake.data.gradientLinks = snake.data.gradientLinks - 5;
        snake.data.gradientRechts = snake.data.gradientRechts - 5;
        if (snake.data.gradientLinks <= 20) {
            snake.data.modus = "hochzaehlen";
        }
    }
    return string;
},

我的问题是，当蛇移动并改变方向时，梯度需要 flex 以适应拐 Angular 结束前的最后一个 body 部位和蛇的直线后的最后一个 body 部位。

例如:

我使用 10x10 像素的 div 元素

现在我需要它移动一个 Angular 时的过渡

有人知道吗？

Answer 1

我花时间编写了一些您可能会觉得有用的实用 javascript 函数。然而，它们需要使用 jQuery 库。创建 flex 渐变的最佳方法是使用偏移径向渐变。这与边界半径相结合，产生了非常好的效果。

现在就看你了

• 在正确的时间使用正确的功能(命名约定函数是 sideA_To_sideB 所以 rightToUp 意味着向右走最终找到 sideA 并向上移动最终会找到 sideB - sides是头还是尾)
• 让它跨浏览器(如果你喜欢那种东西)
• 将头部和尾部四舍五入会很不错(理想情况下，这种四舍五入只会发生在垂直和水平部分)

请随意更改大小变量以满足您的需要。

编辑 - 基于您刚刚添加的图片我创建了这个:jsfiddle http://jsfiddle.net/Lbydhhkh/ .这是使用旋转线性渐变完成的。我仍然认为使用我原来的方法看起来更好，也更有意义。不过，这应该足以让您朝着正确的方向前进。伪代码仍可用于此新代码。

var size = 40;

function aToB(gradient) {
    return $("<div>").css({
        width: size,
        height: size,
        background: gradient,
        position: "absolute"
    });
}

function radialOut(x, y, corner) {
    var css = {};
    css["border-" + corner + "-radius"] = size / 2;
    return aToB([
        "radial-gradient(",
    size,
        "px at ",
    x,
        "px ",
    y,
        "px, red, blue)"].join("")).css(css);
}

function radialIn(x, y, corner) {
    var css = {};
    css["border-" + corner + "-radius"] = size / 2;
    return aToB([
        "radial-gradient(",
    size,
        "px at ",
    x,
        "px ",
    y,
        "px, blue, red)"].join("")).css(css);
}

function downToUp() {
    return aToB("linear-gradient(to left, red, blue)");
}

function rightToLeft() {
    return aToB("linear-gradient(to bottom, red, blue)");
}

function upToDown() {
    return aToB("linear-gradient(to right, red, blue)");
}

function leftToRight() {
    return aToB("linear-gradient(to top, red, blue)");
}

function upToRight() {
    return radialIn(size, 0, "bottom-left");
}

function leftToUp() {
    return radialIn(0, 0, "bottom-right");
}

function downToLeft() {
    return radialIn(0, size, "top-right");
}

function rightToDown() {
    return radialIn(size, size, "top-left");
}

function rightToUp() {
    return radialOut(size, 0, "bottom-left");
}

function upToLeft() {
    return radialOut(0, 0, "bottom-right");
}

function leftToDown() {
    return radialOut(0, size, "top-right");
}

function downToRight() {
    return radialOut(size, size, "top-left");
}

$(function () {
    //inner
    $("body").append(upToDown().css({
        top: size,
        left: 0
    })).append(upToRight().css({
        top: size * 2,
        left: 0
    })).append(leftToRight().css({
        top: size * 2,
        left: size
    })).append(leftToUp().css({
        top: size * 2,
        left: size * 2
    })).append(downToUp().css({
        top: size,
        left: size * 2
    })).append(downToLeft().css({
        top: 0,
        left: size * 2
    })).append(rightToLeft().css({
        top: 0,
        left: size
    })).append(rightToDown().css({
        top: 0,
        left: 0
    }));

    //outer
    $("body").append(leftToDown().css({
        top: 0,
        left: size * 5
    })).append(upToDown().css({
        top: size,
        left: size * 5
    })).append(upToLeft().css({
        top: size * 2,
        left: size * 5
    })).append(rightToLeft().css({
        top: size * 2,
        left: size * 4
    })).append(rightToUp().css({
        top: size * 2,
        left: size * 3
    })).append(downToUp().css({
        top: size * 1,
        left: size * 3
    })).append(downToRight().css({
        top: 0,
        left: size * 3
    })).append(leftToRight().css({
        top: 0,
        left: size * 4
    }));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这里还有一些伪代码可以帮助你调用合适的函数

while(nextPart()) { //while there are more parts to process
    var prev = getPrev(), //returns null or previous part
        curr = getCurrent(), //returns current part
        next = getNext(), //returns null or next part
        a, b, part = [];

    //get the direction towards the tail
    if(prev) a = curr.getDirectionTo(prev); //returns "up", "right", "down", or "left"
    else a = tail.getOppositeDirection(); //returns "up", "right", "down", or "left"

    //get the direction towards the head
    if(next) b = curr.getDirectionTo(next);
    else b = head.getDirection(); //returns "up", "right", "down", or "left"

    b = upperCaseFirstLetter(b);

    if(!prev) part.push("tail"); //is this a tail?
    if(!next) part.push("head"); //is this a head?

    //the following line of code calls a function with the form "aToB"
    //the variable part does not do anything yet but it can help the called  
    //function determine if this part is a head, tail, or both for rounding
    var domElement = window[a + "To" + b](part); 
    domElement.css(curr.position()); //properly position the element
    $("#container").append(domElement); //add the element to the container
}