JavaScript Canvas 同时移动和动画颜色

Question

我的脚本正在动画化球的颜色变化。 1 个完整序列需要 1 秒，并使用渐变将颜色从绿色更改为蓝色。我正在尝试添加一个 move() 方法来移动球。

但是我在执行 move() 方法时遇到了问题。 现在球移动的动画是在颜色动画中执行的，但它不应该这样。颜色应该有不同的变化，球应该在无限移动。我想让球无限移动，并且颜色的改变必须像现在一样花费 1 秒。

我这样做对吗？

<-- 编辑 - 我将间隔更改为 2000 毫秒，只是为了更好地可视化问题(球的移动停止但不应该停止)

var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var i = 0;
var ec;
var direction = 0;
var x = 100;
var dx = 10;
var y = 100;
var radius = 100;

function move() {

    if(x + radius > window.innerWidth || x - radius < 0) {
        dx = -dx;
    }
    x += dx;
}

function animate() {
    c.clearRect(0, 0, innerWidth, innerHeight)
    move();
    var gradient = c.createLinearGradient(0, 0, 170, 0);
    ec = 255 - i;

    gradient.addColorStop(1, "rgba(" + 0 + "," + i + "," + ec + ")", 1);
            
    c.fillStyle = gradient;
    c.beginPath();
    c.arc(x, y, radius, 0, 2 * Math.PI);
    c.fill();

    console.log(i, ec);

    if(i == 255) direction = 1;
    if(direction == 1 && i == 0) direction = 2;
    if(direction == 0 ) i+=5;
    else if(direction == 1 && direction != 2) i -= 5;
    if(direction != 2) requestAnimationFrame(animate);
}

setInterval(function draw() {
    direction = 0;
    animate();
}, 2000);

canvas {
            border: 1px solid black;
        }

        body {
            margin: 0;
        }

<canvas></canvas>

Answer 1

我让一切都按预期工作。但这很复杂，有什么办法可以让它更简单吗？ 有人可以教我如何使用代码段吗？

var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var i = 0;
var ec;
var direction = 0;
var x = 300;
var y = 300;
var radius = 200;
var speed = 5;
var dateDiff;
var date1;
var executedTimer = false;
var executedColor = false;

function draw() {
    c.clearRect(0, 0, innerWidth, innerHeight)
    c.beginPath();
    c.arc(x, y, radius, 0, 2 * Math.PI);
    c.fill();
}

function move() {
    if(x + radius > window.innerWidth || x - radius < 0) {
        speed = -speed;
    }
    x += speed;
}

function color() {
    var gradient = c.createLinearGradient(0, 0, 170, 0);
    ec = 255 - i;
    gradient.addColorStop(1, "rgba(" + 0 + "," + i + "," + ec + ")", 1);
            
    c.fillStyle = gradient;
    //console.log(i, ec);

    if(i == 255) direction = 1;
    if(direction == 1 && i == 0) direction = 2;
    if(direction == 0 ) i += 5;
    else if(direction == 1 && direction != 2) i -= 5;
}

function timerStart() {
    date1  = new Date();
    executedTimer = true;
}

function timerCheck() {
    var date2  = new Date();
    dateDiff = Math.abs(date1 - date2);
    if(dateDiff >= 1000)date1 = date2;
}

function animate() {
    draw();
    move();
    if(executedTimer == false) timerStart();
    if(executedColor == false) { 
        executedColor = true;
        color();
    }
    if(dateDiff < 1000) color();
    if(dateDiff >= 1000 && direction == 2) {
        i = 0;
        direction = 0;
        //console.log(dateDiff);
        color();
    }
    timerCheck();
    requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

canvas {
  border: 1px solid black;
}

body {
  margin: 0;
}

<canvas></canvas>