如何使用 CSS 和 JavaScript 创建逐帧动画？

逐帧动画是一种技术，其中一组图像以特定顺序逐个显示，在两个连续图像之间保持固定的时间间隔间隙，以使眼睛产生运动错觉。现在，从更技术的角度来说，我们可以说逐帧动画是一种技术，不同的帧一个接一个地出现，在不同的帧中保持固定的时间间隔间隙来制造运动的错觉。

我们可以使用 JavaScript setInterval()方法来创建逐帧动画。 setInterval()方法用于在每个给定时间间隔重复特定函数，因此它可以用于帧集上的逐帧动画中，以便它们之间看起来具有固定的时间间隔间隙。

句法：

setInterval(function, milliseconds);

参数：

• 函数：必须执行的函数。
• 毫秒：表示每帧之间的时间间隔长度，以毫秒为单位。

例子：

HTML

  

    
        img {
            height: 250px;
            width: 250px;
        }
  
        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 250px;
            height: 250px;
            border: 3px solid #73AD21;
            padding: 2px;
        }
    

  

    
        var images = new Array()
        images = [
"https://media.geeksforgeeks.org/wp-content/uploads/20210721215006/frame1.PNG",
"https://media.geeksforgeeks.org/wp-content/uploads/20210721215014/frame2-200x190.PNG",
"https://media.geeksforgeeks.org/wp-content/uploads/20210721215021/frame3-200x182.PNG"
        ];
  
        setInterval("Animate()", 400);
        var x = 0;
  
        function Animate() {
            document.getElementById("img").src = images[x]
            x++;
            if (images.length == x) {
                x = 0;
            }
        }
    
  
    
        
  
        Frame by Frame Animation
    

  

输出：

帧动画