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

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

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

语法:

setInterval(function, milliseconds);

参数：

function： 需要执行的函数。
milliseconds： 每帧之间的时间间隔长度（以毫秒为单位）。

示例：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        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; 
        } 
    </style> 
</head> 
  
<body> 
    <script> 
        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; 
            } 
        } 
    </script> 
  
    <div class="center"> 
        <img id="img" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210721215006/frame1.PNG"> 
  
        <h3>Frame by Frame Animation</h3> 
    </div> 
</body> 
  
</html>

输出：

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