帧频动画

（1）定义帧频

基本语法

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

参数

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

返回值

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

功能

  1. 该window.requestAnimationFrame()方法告诉浏览器您希望执行动画，
  2. 并请求浏览器调用指定的函数以在下次重绘之前更新动画。
  3. 该方法将回调作为在重绘之前调用的参数。回调次数通常为每秒60次。

优点

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

（2）关闭帧频

基本语法

window.cancelAnimationFrame(帧频名称);

功能

关闭指定名称的帧频。

例：
<!DOCTYPEhtml>
<html>
<head>
<title>帧频动画</title>
<metacharset="utf-8"/>
</head>
<body>
<divid="div1">0</div>
<br/><br/>
<inputtype="submit"value="开始"onclick="start()"/>
<inputtype="reset"value="停止"onclick="stop()"/>
<scripttype="text/javascript">
varnum=0;
varraf=null;
functionstart(){
num++;
document.getElementById("div1").innerText=num;
raf=window.requestAnimationFrame(start);
}
functionstop(){
window.cancelAnimationFrame(raf);
}
</script>
</body>
</html>

image.png

代码讲解
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的帧频

定时器动画

(1）定义定时器

基本语法
window.setTimeout(要执行的代码, 等待的毫秒数);
window.setTimeout(JavaScript 函数, 等待的毫秒数);
功能
该方法用于在指定的毫秒数后调用函数或代码。

(2）清除定时器


基本语法
window.clearTimeout(定时器的名称); 
功能
清除指定名称的定时器。

例：
<!DOCTYPEhtml>
<html>
<head>
<title>帧频动画</title>
<metacharset="utf-8"/>
</head>
<body>
<divid="div1">0</div>
<br/><br/>
<inputtype="submit"value="开始"onclick="start()"/>
<inputtype="reset"value="停止"onclick="stop()"/>
<scripttype="text/javascript">
varnum=0;
varraf=null;
functionstart(){
num++;
document.getElementById("div1").innerText=num;
raf=window.setTimeout(start,10);
}
functionstop(){
window.clearTimeout(raf);
}
</script>
</body>
</html>

image.png

代码讲解
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的定时器