cancelAnimationFrame()用法
分类：实例代码
此方法可以停止函数动画的执行，具体可以参阅requestAnimationFrame()一章节。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
#antzone {
width:1px;
height:17px;
background:#0f0;
}
</style>
<script>
window.onload=function(){
window.requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
var start = null;
var ele = document.getElementById("antzone");
var progress = 0;
var timer = null;
function step() {
progress += 1;
ele.style.width = progress + "%";
ele.innerHTML = progress + "%";
if (progress < 100) {
timer = requestAnimationFrame(step);
}
}
requestAnimationFrame(step);
document.getElementById("run").addEventListener("click", function () {
ele.style.width = "1px";
progress = 0;
requestAnimationFrame(step);
}, false);
document.getElementById("stop").addEventListener("click", function () {
cancelAnimationFrame(timer);
}, false);
}
</script>
</head>
<body>
<div id="antzone">0%</div>
<input type="button" value="查看演示" id="run" />
<input type="button" value="停止动画" id="stop"/>
</body>
</html>
cancelAnimationFrame()用法，这样的场景在实际项目中还是用的比较多的，关于cancelAnimationFrame()用法就介绍到这了。
cancelAnimationFrame()用法属于前端实例代码，有关更多实例代码大家可以查看。