Javascript 通过计时器/延迟在画布上移动不同的图像

我希望能够在画布上移动一些图像，比如说5/6。图像的位置每次都会发生明显变化，模拟基本动画。图像将处于计时器/延迟状态，以便每隔一秒左右移动一次。有没有一个函数，我可以创建，这样我就不必重复相同的代码一遍又一遍的图像。如果图像是预加载的，那也不错，但是我不确定一旦图像被预加载后如何操作它

如果还有一种使用requestAnimationFrame而不是setTimeout的方法，那就更好了

这是我目前的代码：

 window.addEventListener("load", eventWindowLoaded, false);
        function eventWindowLoaded () {

        images = new Array();
        images[0] = "images/1.png";
        images[1] = "images/2.png";
        images[2] = "images/3.png";
        images[3] = "images/4.png";
        images[4] = "images/5.png";

        imageObjs = [];

        for(var i = 0; i <= 4; i++){
            var imageObj = new Image();
            imageObj.src = images[i];
            imageObjs.push(imageObj);
        }       
drawFrame();
}

function drawFrame () { 



        setTimeout(function() {
        image = new Image();
        image.onload = function() {
            ctx.drawImage(imageObjs[0], 0, 0);
        }
        image.src = "images/1.png";
        }, 200);


        setTimeout(function () {
        image2 = new Image();

        image2.onload = function() {
            ctx.drawImage(imageObjs[1], 200, 0);
        };
        image2.src = "images/2.png";
    }, 1000);
}

window.addEventListener（“加载”，eventWindowLoaded，false）；
函数eventWindowLoaded（）{
images=新数组（）；
图像[0]=“图像/1.png”；
images[1]=“images/2.png”；
images[2]=“images/3.png”；
images[3]=“images/4.png”；
images[4]=“images/5.png”；
imageObjs=[]；
对于（var i=0；i您表示有兴趣让代码执行以下操作：


预加载所有图像
在画布上移动图像
使用动画循环函数，使代码不会重复
为了提高效率，请使用requestAnimationFrame而不是setTimeout

下面是示例代码和演示：


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var图像=[]；
push（{x:20，y:200，moveX:5，maxX:250，delay:100，nextTime:0，url:'https://dl.dropboxusercontent.com/u/139992952/multple/cars1.png'});
push（{x:20，y:30，moveX:10，maxX:100，delay:500，nextTime:0，url:'https://dl.dropboxusercontent.com/u/139992952/multple/sun.png'});
var imageCount=images.length；
对于（var n=0；n0）{return；}
请求动画帧（动画）；
}
函数动画（时间）{
请求动画帧（动画）；
var needsRedrawing=false；
对于（变量n=0；ni.nextTime）{
如果（i.x+i.moveXIs是否可以在图像移动时交替显示图像？例如，汽车移动5px，然后变为太阳移动5px，然后再回到汽车？因此，屏幕上在任何时候都只有一个图像ure！您可以使用maxX控制图像是否移动或停止。图像移动直到到达maxX，然后停止停止。因此，通过将其maxX设置为大于其x来启动太阳移动。您可以使用：
if（i.x>=i.maxX）测试它是否已达到其maxX（因此停止）
。当太阳停止时，您可以通过将其最大值设置为大于其最大值来启动汽车图像移动…并根据需要重复…祝您的项目好运！谢谢，我想我已经找到了。因此，当第一张图像达到其最大值时，我可以简单地弹出（）它从阵列开始，从第一个图像完成的位置开始第二个图像？依此类推？因此，将只显示一个图像，但这将是一个连续的动画