javascript - 我该如何制作一系列动画？

我有一系列的图像，我想将它们作为html中的一系列动画播放

<img src='image1.png' />
<img src='image2.png' />
<img src='image3.png' />
<img src='image4.png' />
<img src='image5.png' />
<img src='image6.png' />
<img src='image7.png' />
<img src='image8.png' />
<img src='image9.png' />
<img src='image10.png' />
<img src='image11.png' />
<img src='image12.png' />

它们都需要位于相同的位置，但是只是非常快速地从image 1交换到image 12，以使其看起来像是动画。

有没有办法正确地做到这一点？我已经搜索过谷歌，但没有运气。谢谢您的帮助！

最佳答案

最好的方法是仅拥有一个Image，并且仅更改image src属性。喜欢

<img src="image1.png" id="animationImage" />

之后，您可以简单地使用setInterval进行更改：

var imageId = 1;
window.setInterval("changeImage()", 100);
function changeImage(){
    imageId++;
    if (imageId > 12)
        imageId = 1;
    $("#animationImage").attr("src", "image" + imageId + ".png");
    // if you are NOT using jQuery, use this line instead:
    document.getElementById("animationImage").src = "image" + imageId + ".png"
}

当然，您也可以简单地隐藏/添加图像：

的HTML

<img src="image1.png" class="animationImage" />
<img src="image2.png" class="animationImage" />
<img src="image3.png" class="animationImage" />
<img src="image4.png" class="animationImage" />
<img src="image5.png" class="animationImage" />
<img src="image6.png" class="animationImage" />
<img src="image7.png" class="animationImage" />
<img src="image8.png" class="animationImage" />
<img src="image9.png" class="animationImage" />
<img src="image10.png" class="animationImage" />
<img src="image11.png" class="animationImage" />
<img src="image12.png" class="animationImage" />

Javascript：

$(".animationImage:not(:first)").hide();
var imageId = 0;
window.setInterval("changeImage()", 100);
function changeImage(){
    $($(".animationImage")[imageId]).hide();
    imageId++;
    if (imageId > 11)
        imageId = 0;
    $($(".animationImage")[imageId]).show();
}

在两个示例中，数字100表示应用程序在显示下一张图像之前将等待的毫秒数。

编辑最后一个解决方案假定使用jQuery库。

关于javascript - 我该如何制作一系列动画？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21690304/