窗口 | Window.requestAnimationFrame() 方法

如今，引入了各种Web开发技术来创建优雅的网页。在谈论优雅的网页时，想到的最重要的事情之一就是动画。有很多方法可以生成它们，现代 CSS 就是其中之一，但 JavaScript 一直是这样做的强大选项。

requestAnimationFrame()是 JavaScript 中存在的方法之一，可以在我们的项目中强大地合并令人惊叹的简单动画。使用了较早的方法，例如setTimeout()或setInterval() ，这没问题，但它们减慢了整个过程。他们的主要问题是同步。过渡时间很慢，与用户的系统不完美匹配。

在这里， requestAnimationFrame()出现了。基本上， requestAnimationFrame()方法很容易与您的浏览器时间同步，并在实际加载屏幕之前生成调用以执行特定动画。此外，当动画实际上没有被使用时，它也会减慢它的进程，从而节省资源。

句法：

window.requestAnimationFrame( callback );

参数：此方法接受如上所述的单个参数，如下所述：

• 回调：除非您希望动画停止，否则您应该编写回调函数，以便它调用自己，以便发出对下一帧的请求。回调函数采用时间戳或只是它应该开始执行的时间值。

返回值：此方法返回一个非零长整数值，作为回调函数中动画条目的唯一标识。

以下示例说明了 Web API 中的requestAnimationFrame()方法：

示例 1：

    
        Window.requestAnimationFrame() Method
    

  

    
        GeeksforGeeks
        Window.requestAnimation()
    
  
    
  
        // Setting the start point for animation
        var start = null; 
        var element = document.getElementById('gfg');
  
        function startAnim(timestamp) {
  
            // Timestamp is an integer that represents the number 
            // of seconds elapsed since January 1 1970.
            if (!start) start = timestamp;
  
            // Setting the difference between timestamp 
            // and the set start point as our progress
            var progress = timestamp - start;
  
            // Moving our div element
            element.style.transform = 
            'translateX(' + Math.min(progress / 10, 700) + 'px)';
            window.requestAnimationFrame(startAnim);
        }
  
        window.requestAnimationFrame(startAnim);
    

  
                    

输出：

示例 2：

  

    
        div {
            position: absolute;
            left: 10px;
            top: 50px;
            padding: auto;
            color: white
        }
        h1 {
            color: green;
        }
    

  

    
        GeeksforGeeks
    
        Start the animation
    
    
        var x = document.getElementById("gfg");
  
        // Initializing variables
        var requestId;
        var stopped;
        var starttime;
  
        function startAnim(time) {
  
            // Set left style to a function of time if it is not stopped
            if (!stopped) {
  
                // We use the difference between time returned 
                // by Data.now() and the animation starttime 
                x.style.left = ((Date.now() - starttime) / 10 % 700) + "px";
                requestId = window.requestAnimationFrame(startAnim);
            }
        }
  
        function start() {
  
            // Return the number of milliseconds since 1970/01/01:
            starttime = Date.now();
  
            // Starting point of animation
            requestId = window.requestAnimationFrame(startAnim);
            stopped = false; // Means animation will not stop 
        }
    

  

输出：

支持的浏览器： Window.requestAnimationFrame() 方法支持的浏览器如下：

• 谷歌浏览器 23.0
• 互联网浏览器 10.0
• 火狐11.0
• 歌剧 10.0
• 野生动物园 6.1