javascript - 使用延迟更改图像

Question

我正在尝试弄清楚如何使用三张图像的顺序制作动画。

默认图像是“image1.png”，在页面加载时始终显示。

1. 每隔 5 秒，变量“back.src”必须突然改变到 image2.png，所以不会褪色。默认为image1.png

2. 然后 0.5 秒后，变量再次更改，但随后变为 image3.png.

3. 0.5 秒后变回 image2.png

4. 0.5 之后再次返回到 image1.png。

这是要循环重复的，因为我想在 5 秒后再次重复这个过程。

我的问题是，我不知道构建这段代码是否是最好的解决方法。根据上述要求，我的代码需要看起来如何？

这是我到目前为止的代码:

var back = new Image();
back.src = "image1.png";
        function wait(miliseconds) {
            var currentTime = new Date().getTime();
            while (currentTime + miliseconds >= new Date().getTime()) {
            }
        }

        function image1() {
            wait(5000);
            back.src = "image2.png";
        }

        function image2() {
            wait(500);
            back.src = "image3.png";
        }

        function image3() {
            wait(500);
            back.src = "image2.png";
        }


function animate(){
    ctx.save();
    ctx.clearRect(0, 0, cW, cH);
    ctx.drawImage(back,0,0);        
    ctx.restore();
}
var animateInterval = setInterval(animate, 30);

Answer 1

在 Javascript 中没有 wait() 操作，通常尝试像你正在做的那样会导致不好的事情发生(事件循环被饿死，用户界面被锁定，等等...... ).相反，您可以使用 setTimeout() 安排事情在未来运行。这允许 JS 引擎在您等待下一次循环迭代时做其他事情(例如服务系统中发生的其他事件)，这在 Javascript 中通常非常重要。

我建议您只需将您想要的序列放入数据结构中，然后使用一个计时器遍历数据结构，在到达末尾时换行:

var data = [
  ["image1.png", 5000],
  ["image2.png", 500],
  ["image3.png", 500],
  ["image4.png", 500]
];

function runAnimation() {
    var index = 0;

    function animate(image){
        ctx.save();
        ctx.clearRect(0, 0, cW, cH);
        ctx.drawImage(image,0,0);        
        ctx.restore();
    }

    function next() {
       var img = new Image();
       img.src = data[index][0];
       animate(img);

       // schedule next iteration 
       var t = data[index][1];

       // increment and wrap index if past end
       index = (index + 1) % data.length;

       setTimeout(next, t);
    }

    next();

}

为了使其正常工作，您需要预先缓存图像以便立即加载它们。如果您不打算预缓存图像，那么您将需要添加 onload 处理程序，以便您可以知道图像何时完成加载并准备好绘制。

这里有关于预缓存图像的信息:How do you cache an image in Javascript

或者，为了确保您的图像在绘制之前已加载，您可以使用这样的 onload 处理程序:

var data = [
  ["image1.png", 5000],
  ["image2.png", 500],
  ["image3.png", 500],
  ["image4.png", 500]
];

function runAnimation() {
    var index = 0;

    function animate(image){
        ctx.save();
        ctx.clearRect(0, 0, cW, cH);
        ctx.drawImage(image,0,0);        
        ctx.restore();
    }

    function next() {
       var img = new Image();
       var nextSrc = data[index][0];
       img.onload = function() {
           animate(img);

           // schedule next iteration 
           var t = data[index][1];

           // increment and wrap index if past end
           index = (index + 1) % data.length;

           setTimeout(next, t);
       };
       img.src = nextSrc;
    }

    next();

}