javascript - 动画 HTML Canvas 元素

Question

我正在尝试为 <canvas> 上的元素设置动画但 setTimeout 和 setInterval 给我带来了问题。我的数据在数组中。我得到了它的长度。对于每个节点，我生成一个 X 和一个 Y、一个基本方向和一种颜色。然后我的绘图函数为每个节点绘制一个圆。

当我尝试使用 setInterval 循环时，出现了问题。我的想法是，我可以建立所有 X、Y 值，然后循环并每 10ms-100ms 递增它们。但每次我使用 setInterval 时，保存每个圆数据的子数组的长度都会变为 3，并且值会设置为未定义。

我使用各种对象对此进行了编码，但无法使动画正常工作。我了解了对象中 setInterval() 范围的问题。我在没有建立一堆对象的情况下重新编码了它。还是没有运气。

$(document).ready(function(){
    getTweets();
});

CTX = $('#tweets')[0].getContext("2d");
WIDTH = $('#tweets').width();
HEIGHT = $('#tweets').height();
RADIUS = 10;
TWEETS = [];
CORDS = [];
DIRECTION = ['north','east','south','west'];

function getTweets(){
    $.getJSON("http://search.twitter.com/search.json?callback=?&q=scion&rpp=100",
    function(r){
        var numberOfTweets = r.results.length;
        while(numberOfTweets--){
            TWEETS.push(r.results[numberOfTweets].text);
        }
        plotXY();
        animateTweets()
    });
}

function animateTweets(){
    return setTimeout(plotXY(true),100);
}

function plotXY(animating){
    if(!animating){
        var numberOfTweets = TWEETS.length;
        while(numberOfTweets--){
            var topY = Math.ceil(Math.random()*(HEIGHT-20)),
                leftX = Math.ceil(Math.random()*(WIDTH-20)),
                cardinal = Math.floor(Math.random()*4),
                color = '#'+Math.floor(Math.random()*16777215).toString(16);

            var valCords = validateCords(leftX, topY);
            CORDS.push([valCords[0], valCords[1], cardinal, color]);
        }
        // console.log('animating false');
        // console.log(CORDS);
    }
    else{
        var numberOfTweets = TWEETS.length;
        while(numberOfTweets--){
            if(CORDS[numberOfTweets][2]=='north'){ //NORTH
                CORDS[numberOfTweets][1]+=2;
                CORDS[numberOfTweets][0]+=2;
            }
            if(CORDS[numberOfTweets][2]=='east'){ //EAST
                CORDS[numberOfTweets][1]+=2;
                CORDS[numberOfTweets][0]-=2;
            }
            if(CORDS[numberOfTweets][2]=='south'){ //SOUTH
                CORDS[numberOfTweets][1]-=2;
                CORDS[numberOfTweets][0]-=2;
            }
            if(CORDS[numberOfTweets][2]=='west'){ //WEST
                CORDS[numberOfTweets][1]-=2;
                CORDS[numberOfTweets][0]+=2;
            }

            var valCords = validateCords(leftX, topY, numberOfTweets);

            CORDS.push([valCords[0],valCords[1],cardinal]);
            CORDS.shift();          
        }
        // console.log('animating true');
        // console.log(CORDS);
    }
    drawCircles();
}


function drawCircles(){
    console.log('drawing');
    var numOfCords = CORDS.length;
    clear();

    while(numOfCords--){
        CTX.fillStyle = CORDS[numOfCords][3];
        CTX.beginPath();
        CTX.arc(CORDS[numOfCords][0], CORDS[numOfCords][1], RADIUS, 0, Math.PI*2, true);
        CTX.closePath();
        CTX.fill();
    }
}

Answer 1

我不知道这是否是您代码中的唯一问题，但一个重要的问题是您使用 setTimeout() 的方式:

setTimeout(plotXY(true), 100); // doesn't work

这表示调用 plotXY() 函数，然后将其返回的任何内容作为第一个参数传递给 setTimeout。

相反，setTimeout() 的第一个参数应该是函数表达式或对函数的引用，如下所示:

setTimeout(plotXY, 100);      // works, but doesn't pass parameter to plotXY()

请注意，plotXY没有用于此目的的括号。但当然，这会给您带来另一个问题:您希望使用参数 true 调用 plotXY()。通过将对 plotXY() 的调用包装在另一个函数中并将该另一个函数传递给 setTimeout() 可以轻松解决这个问题:

setTimeout(function(){ plotXY(true); }, 100);     // works

这会创建一个匿名函数并将该函数传递给 setTimeout()。

您可能想在 plotXY() 函数末尾再次调用 setTimeout()，或者使用 setInterval()，否则你的动画只有一步。或者您可以执行类似以下操作，它显示了解决参数传递问题的另一种方法以及使用 setTimeout() 继续调用函数的方法:

function plotXYProxy() {
   plotXY(true);
   setTimeout(plotXYProxy, 100);
}
plotXYProxy();

当然，您可以在 plotXYProxy() 中添加一些条件处理来决定是否设置每个超时，例如，您可以让 plotXY() 返回一个 bool 值动画是否已完成并根据该 bool 值调用 setTimeout() 。或者任何适合的东西。

我刚才所说的有关 setTimeout() 参数的所有内容也适用于 setInterval()。