ES6 |动画

在 ES6 JavaScript 中，动画可以通过两种方式完成。 ES6 JavaScript 可用于移动

、 和许多其他 HTML 元素。

• 使用 setInterval() 方法： JavaScript 的setInterval() 方法有两个参数。一个函数和一个整数。它使用clearInterval() 方法终止。
• 使用 requestAnimationFrame() 方法： requestAnimationFrame() 方法采用单参数函数。当屏幕准备好接受下一次重绘时，它将运行该函数。因此，只调用一次requestAnimationFrame()方法就变得毫无意义了。当我们递归调用它时，动画效果就会出现，然后逐帧创建所需的动画，当浏览器准备好时调用每一帧。
  

使用 setInterval() 方法：该方法传统上用于通过 JavaScript 产生动画效果。这依赖于重复执行一些代码来逐帧更改元素。

anim = setInterval(fn, t);
    The function fn is called after every t milliseconds.
clearInterval(anim);
    It terminates the above process.

示例：如果函数fn 产生元素样式的变化，则可以使用 setInterval(函数, t) 在每个时间间隔后产生元素样式的渐变。如果时间间隔足够小，则变化看起来是连续的，从而产生动画效果。

html

 

    
        ES6 | Animation
    
 
    
        #background {
            width: 400px;
            height: 400px;
            position: relative;
            background: black;
        }
        #block {
            width: 50px;
            height: 50px;
            position: absolute;
            background-color: white;
            border: 2px red solid;
        }
    

 

    
     
    GeeksforGeeks
 
    
        
    
     
    
     
    Click here
 
    
        function animation() {
            var can = document.getElementById("block");
            var i = 0;
             
            // Call after 10 ms
            var id = setInterval(makeframe, 10);
         
            function makeframe() {
 
                // Terminate at boundaries
                if (i == 347) {
                    clearInterval(id);
                }
                else {
                    i++;
                         
                    // Setting the top style
                    can.style.top = i + 'px';
 
                    // Setting the left style
                    can.style.left = i + 'px';
                }
            }
        }
    
    

 

输出：

缺点：

• 指定的时间间隔（t）可能不符合用户系统资源，导致帧之间的延迟不一致。
• 使用setInterval()会导致称为布局抖动的情况。

使用 requestAnimationFrame() 方法：使用setInterval()遇到的缺点导致引入 requestAnimationFrame() 方法。该方法允许您在下一个可用的屏幕重绘上执行代码，从而与用户的浏览器和硬件同步以对屏幕进行更改。

function makeframe {
    ..... ......          
    requestAnimationFrame(makeframe); // Recursive call          
}          
makeframe(); // Initiation          

这里的终止是由函数cancelAnimationFrame() 引起的。动画的总体功能及其终止如下所示。

function makeframe {          
    ..... ......          
    if(.. ..){cancelAnimationFrame(anim);} // Termination          
    anim = requestAnimationFrame(makeframe); // Recursive call          
}          
makeframe(); // Initiation

通常，requestAnimationFrame() 以 60 fps 运行。为了减慢它的速度，我们可以使用 setTimeout()函数。其功能如下图所示。

function makeframe {          
    var rate = fps;          
    setTimeout(function() { // Timeout use  
        ..... ......          
        if(.. ..) {cancelAnimationFrame(anim);} // Termination          
        anim = requestAnimationFrame(makeframe); // Recursive call          
    }, 1000/rate);          
}          
makeframe(); // Initiation          

示例：这里减慢/加速动画最舒适的方法是调整每一帧的变化幅度。

html

 

    ES6 | Animation
     
    
        #background {
            width: 200px;
            height: 200px;
            position: relative;
            background: black;
        }
         
        #block {
            width: 50px;
            height: 50px;
            position: absolute;
            background-color: white;
            border: 2px red solid;
        }
    

 

    
     
    GeeksforGeeks
     
    
        
    
     
    
     
    Click here
 
    
        function animation() {
            var can = document.getElementById("block");
            var i = 0;
            var rate = 30;
 
            function makeframe() {
                setTimeout(function() {
                    var anim =
                        requestAnimationFrame(makeframe);
                     
                    if (i == 146) {
                         
                        // Terminate at boundaries    
                        cancelAnimationFrame(anim);
                    }
                    else {
                        i++;
                         
                        // Setting the top style
                        can.style.top = i + 'px';
                         
                         // Setting the left style
                        can.style.left = i + 'px';
                    }
                }, 1000 / rate);
            }
            makeframe();
        }
    
    

 

输出：

注意：这两种方法在使用时都可以用来创建非常复杂的动画（例如，可以在游戏开发中使用）。
支持的浏览器： ES6动画支持的浏览器如下：

• 谷歌浏览器
• IE浏览器
• 火狐
• 苹果浏览器
• 歌剧