1、帧频动画

（1）定义帧频

基本语法

var 帧频名称 = window.requestAnimationFrame(回调函数);

参数

回调函数指定在更新动画以进行下一次重绘时要调用的函数。

返回值

返回一个long整数值，即请求ID，用于唯一标识回调列表中的条目。

功能

该window.requestAnimationFrame()方法告诉浏览器您希望执行动画，并请求浏览器调用指定的函数以在下次重绘之前更新动画。该方法将回调作为在重绘之前调用的参数。回调次数通常为每秒60次。（页面重绘：浏览器行为，页面的显示外观一旦发生变更，就会将页面的显示内容重新绘制一遍）

优点

浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果。

（2）关闭帧频

基本语法

window.cancelAnimationFrame(帧频名称);

功能

关闭指定名称的帧频。

代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>帧频动画</title>
  5. <meta charset="utf-8" />
  6.   <script type="text/javascript">
  7.         var num = 0;
  8.         var a = null;
  9.         function start(){
  10.             num++;
  11.             document.getElementById("div1").innerText=num;
  12.                 a = window.requestAnimationFrame(start);
  13.         }
  14.         function stop(){
  15.             window.cancelAnimationFrame(a);
  16.         }
  17.     </script>
  18. </head>
  19. <body>
  20.   <div id="div1">0</div>
  21.   <br/><br/>
  22.     <input type="submit" value="开始" onclick="start()"/>
  23.     <input type="reset" value="停止" onclick="stop()"/>
  24. </body>
  25. </html>

帧频动画 - 图3 代码讲解

1、定义帧频变量 和 数字变量

var num = 0; 定义数字变量
var raf = null; 定义帧频变量

2、设置帧频

function start(){
num++;
document.getElementById(“div1”).innerText=num;
raf = window.requestAnimationFrame(start);
}
num++; 数字累加
document.getElementById(“div1”).innerText=num; 将数字输出在id为div1的标签中
raf = window.requestAnimationFrame(start); 定义帧频并执行

3、关闭帧频

function stop(){
window.cancelAnimationFrame(raf);
}
window.cancelAnimationFrame(raf); 关闭名为raf的帧频

2、定时器动画

（1）定义定时器

基本语法

window.setTimeout(要执行的代码, 等待的毫秒数);
window.setTimeout(JavaScript 函数, 等待的毫秒数);

功能

该方法用于在指定的毫秒数后调用函数或代码。

（2）清除定时器

基本语法

window.clearTimeout(定时器的名称);

功能

清除指定名称的定时器。

代码

<!DOCTYPE html>
<html>
<head>
<title>帧频动画</title>
<meta charset="utf-8" />
      <script type="text/javascript">
        var num = 0;
        var a = null;
        function start(){
            num++;
            document.getElementById("div1").innerText=num;
            a = window.setTimeout(start,10);  //(函数名，毫秒)
        }

        function stop(){
            window.clearTimeout(a);  //清除定时器
        }
  </script>
</head>
<body>
    <div id="div1">0</div>
    <br/><br/>
    <input type="submit" value="开始" onclick="start()"/>
    <input type="reset" value="停止" onclick="stop()"/>
</body>
</html>

帧频动画 - 图4 代码讲解

1、定义定时器变量 和 数字变量

var num = 0; 定义数字变量
var raf = null; 定义帧频变量

2、设置定时器

function start(){
num++;
document.getElementById(“div1”).innerText=num;
raf = window.setTimeout(start);
}
num++; 数字累加
document.getElementById(“div1”).innerText=num; 将数字输出在id为div1的标签中
raf = window.setTimeout(start); 定义定时器并执行

3、清除定时器

function stop(){
window.clearTimeout(raf);
}
window.clearTimeout(raf); 清除名为raf的定时器