Question

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

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

每5秒后，变量“back.src”必须突然改变到image2.png，所以没有褪色。默认值为image1.png
然后0.5秒后，变量再次变化，然后变为 image3.png。
0.5秒后，它会变回image2.png
和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();

}

Answer 2

您可以使用setIterval()

来实现它

了解JS计时器Here

以下是您的需求：https://jsfiddle.net/nfe81zou/3/

var image1 = "https://pixabay.com/static/uploads/photo/2016/06/17/13/02/duck-1463317_960_720.jpg";
var image2 = "https://pixabay.com/static/uploads/photo/2013/09/22/16/56/duck-185014_960_720.jpg";
var image3 = "https://pixabay.com/static/uploads/photo/2013/11/02/03/23/ducks-204332_960_720.jpg";

$(function() {
  $("#image").prop("src", image1);
  setInterval(function() {
$("#image").prop("src", image2);
setTimeout(function() {
  $("#image").prop("src", image1);
  setTimeout(function() {
    $("#image").prop("src", image3);
  }, 500);
  setTimeout(function() {
    $("#image").prop("src", image2);
  }, 1000);
}, 1500);
  }, 5000);
});

#image {
  border: 2px solid red;
  width: 400px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="" id="image"/>

Answer 3

这是我解决这个问题的方法。图像以

的顺序显示

0（5000ms） - ＆gt; 1（500ms） - ＆gt; 2（500ms） - ＆gt; 1（500ms） - ＆gt; 0（5000ms）...

这里没有setInterval()。此代码使用伪递归setTimeout()实现。

＆＃13;

var images = ["http://1.bp.blogspot.com/_ZRj5nlc3sp8/S-T7vOsypQI/AAAAAAAADBo/0kYfB8BM6zE/s320/beautiful+girl+pics+1.jpg",
              "http://1.bp.blogspot.com/-w4UtHwbrqBE/ViNbJWhnmvI/AAAAAAAADtY/hGbRtz993Tg/s1600/face%2Bwallpapers%2B%25282%2529.jpg",
              "http://2.bp.blogspot.com/-4kZ9Iu8QTws/ViNbL3S29fI/AAAAAAAADtw/QakqQE72N1w/s1600/face%2Bwallpapers%2B%25286%2529.jpg"],
      imel = document.getElementById("photo");
function displayImages(idx,fwd){
  var ms = 0;
  idx = idx || 0;    // we could also use the ES6 default value method.
  if (idx === 0) {
    fwd = !fwd;      // when index becomes 0 switch the direction of the loop
    ms = fwd ? 5000  // if backwards rearrange index and duration to 0.5 sec
             : (idx = images.length - 2, 500);
  } else ms = 500;   // when index is not 0 set the duration to 0.5 sec
  imel.src = images[idx];
  fwd ? setTimeout(function(){displayImages(++idx % images.length,fwd)},ms)
      : setTimeout(function(){displayImages(--idx,fwd)},ms);
}

displayImages();

＆＃13;

<image id ="photo"></image>

＆＃13;

使用延迟更改图像

3 个答案: