如何停止requestAnimationFrame方法启动的动画
\u5982\u4f55\u505c\u6b62requestAnimationFrame\u65b9\u6cd5\u542f\u52a8\u7684\u52a8\u753b\u3000\u3000HTML5/CSS3\u65f6\u4ee3\uff0c\u6211\u4eec\u8981\u5728web\u91cc\u505a\u52a8\u753b\u9009\u62e9\u5176\u5b9e\u5df2\u7ecf\u5f88\u591a\u4e86:
(1) \u4f60\u53ef\u4ee5\u7528CSS3\u7684animattion+keyframes;
(2) \u4f60\u4e5f\u53ef\u4ee5\u7528css3\u7684transition;
(3) \u4f60\u8fd8\u53ef\u4ee5\u7528\u901a\u8fc7\u5728canvas\u4e0a\u4f5c\u56fe\u6765\u5b9e\u73b0\u52a8\u753b\uff0c\u4e5f\u53ef\u4ee5\u501f\u52a9jQuery\u52a8\u753b\u76f8\u5173\u7684API\u65b9\u4fbf\u5730\u5b9e\u73b0;
(4) \u5f53\u7136\u6700\u539f\u59cb\u7684\u4f60\u8fd8\u53ef\u4ee5\u4f7f\u7528window.setTimout()\u6216\u8005window.setInterval()\u901a\u8fc7\u4e0d\u65ad\u66f4\u65b0\u5143\u7d20\u7684\u72b6\u6001\u4f4d\u7f6e\u7b49\u6765\u5b9e\u73b0\u52a8\u753b\uff0c\u524d\u63d0\u662f\u753b\u9762\u7684\u66f4\u65b0\u9891\u7387\u8981\u8fbe\u5230\u6bcf\u79d260\u6b21\u624d\u80fd\u8ba9\u8089\u773c\u770b\u5230\u6d41\u7545\u7684\u52a8\u753b\u6548\u679c\u3002
\u3000\u3000\u73b0\u5728\u53c8\u591a\u4e86\u4e00\u79cd\u5b9e\u73b0\u52a8\u753b\u7684\u65b9\u6848\uff0c\u90a3\u5c31\u662f\u8fd8\u5728\u8349\u6848\u5f53\u4e2d\u7684 window.requestAnimationFrame()\u65b9\u6cd5\u3002
\u3000\u3000
\u3000\u3000\u521d\u8bc6requestAnimationFrame
\u6765\u770bMDN\u4e0a\u5bf9\u5176\u7ed9\u51fa\u7684\u8be0\u91ca\uff1a
The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes as an argument a callback to be invoked before the repaint.
\u3000\u3000window.requestAnimationFrame()\u5c06\u544a\u77e5\u6d4f\u89c8\u5668\u4f60\u9a6c\u4e0a\u8981\u5f00\u59cb\u52a8\u753b\u6548\u679c\u4e86\uff0c\u540e\u8005\u9700\u8981\u5728\u4e0b\u6b21\u52a8\u753b\u524d\u8c03\u7528\u76f8\u5e94\u65b9\u6cd5\u6765\u66f4\u65b0\u753b\u9762\u3002\u8fd9\u4e2a\u65b9\u6cd5\u5c31\u662f\u4f20\u9012\u7ed9window.requestAnimationFrame()\u7684\u56de\u8c03\u51fd\u6570\u3002
\u3000\u3000\u4e5f\u53ef\u8fd9\u4e2a\u65b9\u6cd5\u539f\u7406\u5176\u5b9e\u4e5f\u5c31\u8ddfsetTimeout/setInterval\u5dee\u4e0d\u591a\uff0c\u901a\u8fc7\u9012\u5f52\u8c03\u7528\u540c\u4e00\u65b9\u6cd5\u6765\u4e0d\u65ad\u66f4\u65b0\u753b\u9762\u4ee5\u8fbe\u5230\u52a8\u8d77\u6765\u7684\u6548\u679c\uff0c\u4f46\u5b83\u4f18\u4e8esetTimeout/setInterval\u7684\u5730\u65b9\u5728\u4e8e\u5b83\u662f\u7531\u6d4f\u89c8\u5668\u4e13\u95e8\u4e3a\u52a8\u753b\u63d0\u4f9b\u7684API\uff0c\u5728\u8fd0\u884c\u65f6\u6d4f\u89c8\u5668\u4f1a\u81ea\u52a8\u4f18\u5316\u65b9\u6cd5\u7684\u8c03\u7528\uff0c\u5e76\u4e14\u5982\u679c\u9875\u9762\u4e0d\u662f\u6fc0\u6d3b\u72b6\u6001\u4e0b\u7684\u8bdd\uff0c\u52a8\u753b\u4f1a\u81ea\u52a8\u6682\u505c\uff0c\u6709\u6548\u8282\u7701\u4e86CPU\u5f00\u9500\u3002
\u57fa\u672c\u8bed\u6cd5
(1)\u53ef\u4ee5\u76f4\u63a5\u8c03\u7528\uff0c\u4e5f\u53ef\u4ee5\u901a\u8fc7window\u6765\u8c03\u7528\uff0c\u63a5\u6536\u4e00\u4e2a\u51fd\u6570\u4f5c\u4e3a\u56de\u8c03;
(2) \u8fd4\u56de\u4e00\u4e2aID\u503c\uff0c\u901a\u8fc7\u628a\u8fd9\u4e2aID\u503c\u4f20\u7ed9window.cancelAnimationFrame()\u53ef\u4ee5\u53d6\u6d88\u8be5\u6b21\u52a8\u753b\u3002
requestAnimationFrame(callback)//callback\u4e3a\u56de\u8c03\u51fd\u6570
\u3000\u3000\u4e00\u4e2a\u7b80\u5355\u7684\u4f8b\u5b50
\u6a21\u62df\u4e00\u4e2a\u8fdb\u5ea6\u6761\u52a8\u753b\uff0c\u521d\u59cbdiv\u5bbd\u5ea6\u4e3a1px,\u5728step\u51fd\u6570\u4e2d\u5c06\u8fdb\u5ea6\u52a01\u7136\u540e\u518d\u66f4\u65b0\u5230div\u5bbd\u5ea6\u4e0a\uff0c\u5728\u8fdb\u5ea6\u8fbe\u5230100\u4e4b\u524d\uff0c\u4e00\u76f4\u91cd\u590d\u8fd9\u4e00\u8fc7\u7a0b\u3002
\u3000\u3000\u4e3a\u4e86\u6f14\u793a\u65b9\u4fbf\u52a0\u4e86\u4e00\u4e2a\u8fd0\u884c\u6309\u94ae\uff08\u70b9\u51fb\u89c2\u770b\u6548\u679c\uff09
html>
\u52a8\u753b
0%
\u3000\u3000window.requestAnimationFrame =
window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame;
var start = null;
var ele = document.getElementById("test");
var progress = 0;
var stop=null;
function step(timestamp) {
if(progress>=100) progress=0;
progress += 1;
ele.style.width = progress + "%";
ele.innerHTML=progress + "%";
if (progress < 100) {
stop=requestAnimationFrame(step);
}
}
document.getElementById("run").addEventListener("click", function() {
ele.style.width = "1px";
step();
}, false);
document.getElementById("stop").addEventListener("click", function() {
window.cancelAnimationFrame(stop);//\u53ef\u4ee5\u53d6\u6d88\u8be5\u6b21\u52a8\u753b\u3002
}, false);
\u3000\u3000
\u3000\u3000\u4eec\u5728\u79fb\u52a8\u7aef\u4e00\u822c\u4f7f\u7528zepto\u6846\u67b6\uff0c\u4e0e\u5176\u8bf4zepto\u662fjquery\u7684\u8f7b\u91cf\u7ea7\u66ff\u4ee3\u7248\uff0c\u4e0d\u5982\u8bf4\u662fhtml5\u66ff\u4ee3\u7248 \u3000\u3000\u6211\u4eec\u5728js\u4e2d\u4f1a\u7528\u5230animate\u65b9\u6cd5\u6267\u884c\u52a8\u753b\uff0c\u8fd9\u4e2a\u5bb6\u4f19\u53ef\u662f\u771f\u8d44\u683c\u7684\u52a8\u753b\uff0c\u5b8c\u5168\u662fcss\u4e00\u70b9\u70b9\u53d8\u5316\u7684\uff01 \u3000\u3000\u800czepto\u5219\u4e0d\u7136\uff0c\u4f7f\u7528\u7684\u662fHTML5/CSS3\u7684\u65b9\u6848\uff0c\u800cCSS\u76f8\u5173\u662f\u4e0d\u4fdd\u5b58\u5143\u7d20\u72b6\u6001\u503c\u7684\uff0c\u4e5f\u6ca1\u529e\u6cd5\u4fdd\u5b58\uff0c\u6240\u4ee5\u505c\u6b62\u52a8\u753b\u5c31\u6210\u4e86\u4e00\u5927\u95ee\u9898 \u3000\u3000\u6211\u4eec\u4eca\u5929\u5c31\u4e00\u8d77\u6765\u8ba8\u8bba\u4e0b\u76f8\u5173\u505c\u6b62\u52a8\u753b\u7684\u65b9\u6848\uff0c\u53cd\u6b63\u6ca1\u6709\u4ec0\u4e48\u597d\u7684...... \u3000\u3000CSS3\u52a8\u753b\u539f\u7406 \u3000\u3000\u5728\u73b0\u6709\u6d4f\u89c8\u5668\u4e2d\uff0c\u4e00\u822c\u6709\u4e24\u79cd\u6a21\u5f0f\uff08\u6211\u53ea\u77e5\u9053\u4e24\u79cd\uff09\uff1a \u3000\u3000\u4e00\u79cd\u662fjs\u52a8\u753b\uff0c\u4ed6\u662f\u52a8\u6001\u6539\u5199\u5143\u7d20\u7684style\u5b9e\u73b0\u52a8\u753b\uff0c\u6240\u4ee5\u4efb\u610f\u65f6\u95f4\u60f3\u505c\u6b62\u52a8\u753b\u90fd\u662f\u6ca1\u95ee\u9898\u7684\uff0c\u56e0\u4e3a\u6211\u4eec\u53ef\u4ee5\u83b7\u5f97\u5404\u4e2a\u9636\u6bb5\u7684\u72b6\u6001\u503c \u3000\u3000\u53e6\u4e00\u79cd\u5c31\u662fCSS3\u52a8\u753b\u4e86\uff0c\u81f3\u4e8eCSS3\u52a8\u753b\u7684\u539f\u7406\uff0c\u6211\u4e0d\u77e5\u9053\u4f46\u662f\u53ef\u4ee5\u8bf4\u4e00\u70b9\u7684\u5c31\u662f\u2014\u2014\u89c1\u4ee3\u7801 \u3000\u30001 \u3000\u30002 \u3000\u30003 \u3000\u30004 \u3000\u30005 \u3000\u30006 \u3000\u30007 \u3000\u30008 \u3000\u300010 \u3000\u300011 \u3000\u300012 \u3000\u300013 \u3000\u300014 var d = $('#d'); \u3000\u300015 d.animate({ \u3000\u300016 left: '100px' \u3000\u300017 }, 10000); \u3000\u300018 \u3000\u300019 setTimeout(function () { \u3000\u300020 d.html('left: ' + d.css('left')); \u3000\u300021 }, 1); \u3000\u300022 \u3000\u300023 \u3000\u300024 \u3000\u3000http://sandbox.runjs.cn/show/xziwuir2 \u3000\u3000zepto\u7684animate\u4e8b\u5b9e\u4e0a\u9a6c\u4e0a\u5c31\u6539\u53d8\u4e86style\u7684\u503c\uff0c\u6240\u4ee5\u6211\u4eec\u5728\u91cc\u9762\u770b\u5230\u4e86left\u4e3a100px\uff0c\u867d\u7136\u4ed6\u6b63\u5728\u8fd0\u52a8 \u3000\u3000\u800c\u4ed6\u52a8\u753b\u7684\u5b9e\u73b0\u4e8b\u5b9e\u4e0a\u4f7f\u7528\u7684\u662fCSS3\u7684transition\u52a8\u753b\u5c5e\u6027\uff0c\u6211\u4eec\u8fd9\u91cc\u6765\u770b\u770bzepto\u7684\u6e90\u7801\uff1a \u3000\u3000View Code \u3000\u3000\u6700\u540e\u5b9e\u9645\u4e0a\u662f\u6267\u884canim\u5b9e\u73b0\u6211\u4eec\u7684\u52a8\u753b\uff0c\u5927\u5bb6\u6ce8\u610f\u770b\u8fd9\u91cc \u3000\u3000$(this).css(cssReset) \u3000\u3000this.css(cssValues) \u3000\u3000\u4ed6\u4e8b\u5b9e\u4e0a\u641e\u4e86\u4e2a\u5148\u8bbe\u7f6e\u52a8\u753b\u5c5e\u6027\uff0c\u518d\u7ed9style\u5c5e\u6027\u7ed9\u5143\u7d20\uff0c\u6240\u4ee5\u4f1a\u4ea7\u751f\u52a8\u753b \u3000\u3000\u5230\u6b64\uff0czepto\u5b9e\u73b0\u52a8\u753b\u539f\u7406\u6211\u4eec\u5927\u6982\u77e5\u9053\u4e86\uff0c\u73b0\u5728\u95ee\u9898\u5c31\u662f\u5982\u4f55\u505c\u6b62\u4ed6\u4e86\uff0c\u6240\u4ee5\u6211\u4eec\u7ee7\u7eed\u5f80\u4e0b\u770b \u3000\u3000\u5982\u4f55\u505c\u6b62\u52a8\u753b \u3000\u3000\u6211\u4eec\u5148\u770b\u770b\u8fd9\u4e2a\u4e1c\u897f\uff1a \u3000\u30001 \u3000\u30002 \u3000\u30003 \u3000\u30004 \u3000\u30005 \u3000\u30006 \u3000\u30007 \u3000\u30008 \u3000\u300010 \u3000\u300011 \u3000\u300012 \u3000\u300013 \u3000\u300014 var d = $('#d'); \u3000\u300015 d.animate({ \u3000\u300016 left: '100px' \u3000\u300017 }, 10000); \u3000\u300018 \u3000\u300019 setInterval(function () { \u3000\u300020 d.html('left: ' + d.css('left') + ' _ offsetLeft: ' + d[0].offsetLeft); \u3000\u300021 }, 1); \u3000\u300022 \u3000\u300023 \u3000\u300024 \u3000\u3000http://sandbox.runjs.cn/show/gdqezvdo \u3000\u3000\u5176\u4e2d\u867d\u7136left\u4e00\u5f00\u59cb\u5c31\u53d8\u4e86\uff0c\u6211\u4eec\u60ca\u5947\u7684\u53d1\u73b0\uff0coffset\u8fd9\u4e2a\u5bb6\u4f19\u5c45\u7136\u4fdd\u5b58\u4e86\u6211\u4eec\u7684\u72b6\u6001\uff01\uff01\uff01 \u3000\u3000\u6211\u548c\u6211\u7684\u5c0f\u4f19\u4f34\u90fd\u60ca\u5446\u4e86\uff0c\u56e0\u4e3a\u6211\u4e4b\u524d\u4e00\u76f4\u4ee5\u4e3a\u4ec0\u4e48\u72b6\u6001\u90fd\u4e0d\u80fd\u83b7\u5f97\uff0c\u4e8e\u662f\u6211\u4eec\u4e3a\u4ed6\u52a0\u4e0amousedown\u4e8b\u4ef6\uff0c\u5404\u4f4d\u8fd0\u52a8\u65f6\u5019\u70b9\u51fb\u8bd5\u8bd5 \u3000\u3000\u6211\u4eec\u8fd9\u91cc\u8fd9\u6837\u5e72\u4e86\u4e0b\uff1a \u3000\u30001 \u3000\u30002 \u3000\u30003 \u3000\u30004 \u3000\u30005 \u3000\u30006 \u3000\u30007 \u3000\u30008 \u3000\u300010 \u3000\u300011 \u3000\u300012 \u3000\u300013 \u3000\u300014 var d = $('#d'); \u3000\u300015 d.animate({ \u3000\u300016 left: '100px' \u3000\u300017 }, 10000); \u3000\u300018 \u3000\u300019 setInterval(function () { \u3000\u300020 d.html('left: ' + d.css('left') + ' _ offsetLeft: ' + d[0].offsetLeft); \u3000\u300021 }, 1); \u3000\u300022 \u3000\u300023 d.mousedown(function (e) { \u3000\u300024 console.log(d); \u3000\u300025 d.css('transition', 'left 0s linear'); \u3000\u300026 d.css('left', d[0].offsetLeft + 'px'); \u3000\u300027 }); \u3000\u300028 \u3000\u300029 \u3000\u300030 \u3000\u3000\u4e8e\u662f\u6211\u4eec\u53d1\u73b0\uff0c\u52a8\u753b\u505c\u6b62\u4e86\uff0c\u4eb2\uff01\u4ed6\u771f\u7684\u505c\u6b62\u4e86\uff01\uff01\uff01 \u3000\u3000PS\uff1a\u56e0\u4e3a\u9879\u76ee\u8fc7\u7a0b\u4e2d\uff0c\u6211\u8fd9\u91cc\u8981\u6a21\u4eff\u7c7b\u4f3ciscroll\u7684\u6eda\u52a8\u6548\u679c\uff0c\u6240\u4ee5\u4f7f\u7528\u7684\u6700\u591a\u7684\u5c31\u662ftop\u6216\u8005translate3d(0, 0, 0)\u8fd9\u79cd\u4e1c\u897f \u3000\u3000\u7ed3\u8bed \u3000\u3000\u672c\u6765\u8fd9\u91cc\u8fd8\u60f3\u6df1\u5165\u4e00\u70b9\u7814\u7a76\u4e0b\u7684\uff0c\u4f46\u662f\u73b0\u5728\u65f6\u95f4\u6709\u70b9\u6765\u4e0d\u53ca\uff0c\u4e8b\u60c5\u6709\u70b9\u591a\uff0c\u6682\u65f6\u5230\u8fd9\u91cc\u4e86\u5427\uff0c\u5177\u4f53\u7684demo\u4e89\u53d6\u5468\u672b\u641e\u51fa\u6765
HTML5/CSS3时代，我们要在web里做动画选择其实已经很多了: (1) 你可以用CSS3的animattion+keyframes; (2) 你也可以用css3的transition; (3) 你还可以用通过在canvas上作图来实现动画，也可以借助jQuery动画相关的API方便地实现; (4) 当然最原始的你还可以使用window.setTimout()或者window.setInterval()通过不断更新元素的状态位置等来实现动画，前提是画面的更新频率要达到每秒60次才能让肉眼看到流畅的动画效果。 现在又多了一种实现动画的方案，那就是还在草案当中的 window.requestAnimationFrame()方法。 初识requestAnimationFrame 来看MDN上对其给出的诠释： The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes as an argument a callback to be invoked before the repaint. window.requestAnimationFrame()将告知浏览器你马上要开始动画效果了，后者需要在下次动画前调用相应方法来更新画面。这个方法就是传递给window.requestAnimationFrame()的回调函数。 也可这个方法原理其实也就跟setTimeout/setInterval差不多，通过递归调用同一方法来不断更新画面以达到动起来的效果，但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销。 基本语法 (1)可以直接调用，也可以通过window来调用，接收一个函数作为回调; (2) 返回一个ID值，通过把这个ID值传给window.cancelAnimationFrame()可以取消该次动画。 requestAnimationFrame(callback)//callback为回调函数 一个简单的例子 模拟一个进度条动画，初始div宽度为1px,在step函数中将进度加1然后再更新到div宽度上，在进度达到100之前，一直重复这一过程。 为了演示方便加了一个运行按钮（点击观看效果） html> <head> <meta charset="gbk"> <title>动画</title> </head> <body> <div id="test" style="width:1px;height:17px;background:#0f0;">0%</div> <input type="button" value="Run" id="run"/> <input type="button" value="停止" id="stop"/> </body> <script> window.requestAnimationFrame = window.requestAnimationFrame window.mozRequestAnimationFrame window.webkitRequestAnimationFrame window.msRequestAnimationFrame; var start = null; var ele = document.getElementById("test"); var progress = 0; var stop=null; function step(timestamp) { if(progress>=100) progress=0; progress += 1; ele.style.width = progress + "%"; ele.innerHTML=progress + "%"; if (progress < 100) { stop=requestAnimationFrame(step); } } document.getElementById("run").addEventListener("click", function() { ele.style.width = "1px"; step(); }, false); document.getElementById("stop").addEventListener("click", function() { window.cancelAnimationFrame(stop);//可以取消该次动画。 }, false); </script> </html>绛旓細澶嶅埗浠ｇ爜 浠ｇ爜濡備笅: // shim layer with setTimeout fallback window.requestAnimFrame = (function(){ return window.requestAnimationFrame window.webkitRequestAnimationFrame window.mozRequestAnimationFrame window.oRequestAnimationFrame window.msRequestAnimationFrame function(/* function */ callback, /* DO...
绛旓細window.requestAnimFrame = (function(callback) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60...
绛旓細3銆亀indow.requestAnimFrame =(function(){ return window.requestAnimationFrame window.webkitRequestAnimationFrame window.mozRequestAnimationFrame function( callback ) { window.setTimeout( callback锛1000 /60 );};})();// now we will setup our basic variables for the demo var canvas ...
绛旓細}window.requestAnimFrame = (function () {return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (fn) { window.setTimeout(fn, 1000 / 60) };})();window.onload = function () {ctx = document.getElementById('canvas').getConte...
