{"id":3695,"date":"2013-09-30T19:12:17","date_gmt":"2013-09-30T11:12:17","guid":{"rendered":"http:\/\/www.zhangxinxu.com\/wordpress\/?p=3695"},"modified":"2019-06-06T15:02:49","modified_gmt":"2019-06-06T07:02:49","slug":"css3-animation-requestanimationframe-tween-%e5%8a%a8%e7%94%bb%e7%ae%97%e6%b3%95","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2013\/09\/css3-animation-requestanimationframe-tween-%e5%8a%a8%e7%94%bb%e7%ae%97%e6%b3%95\/","title":{"rendered":"CSS3\u52a8\u753b\u90a3\u4e48\u5f3a\uff0crequestAnimationFrame\u8fd8\u6709\u6bdb\u7ebf\u7528\uff1f"},"content":{"rendered":"

by zhangxinxu<\/a> from http:\/\/www.zhangxinxu.com<\/a>
\n\u672c\u6587\u5730\u5740\uff1ahttps:\/\/www.zhangxinxu.com\/wordpress\/?p=3695<\/a><\/p>\n

<\/p>\n

\u4e00\u3001\u54df\uff0crequestAnimationFrame, \u65b0\u540c\u5b66\uff0c\u5148\u81ea\u6211\u4ecb\u7ecd\u4e0b<\/h3>\n

\"\u5927\u5bb6\u597d\"
\nHello, \u5927\u5bb6\u597d\uff0c\u6211\u5c31\u662f\u98ce\u59ff\u5353\u8d8a\uff0c\u4e07\u79cd\u8ff7\u4eba\u7684requestAnimationFrame<\/code>\uff0c\u5475\u5475\u5475\u5475\u3002\u5f88\u9ad8\u5174\u548c\u5927\u5bb6\u89c1\u9762\uff0c\u8bf7\u591a\u6307\u6559\uff01<\/p>\n

\"\u5e73\u9759\u7684\u4f17\u4eba\"
\n\u3002\u3002\u3002\u3002<\/p>\n

\"\u5c0f\u4e38\u5b50\u65e0\u5948\"
\n\u54b3\u54b3\uff0c\u5927\u5bb6\u4e0d\u8981\u4e00\u526f\u4e0d\u5c51\u7684\u6837\u5b50\u561b\u3002\u8ddf\u4f60\u8bb2\uff0c\u6211\u53ef\u662f\u5f88\u6709\u7528\u7684\u3002\u6240\u8c13\u4eba\u5982\u5176\u540d\uff0c\u770b\u6211\u540d\u5b57\u8fd9\u4e48\u957f\uff0c\u8868\u610f\u4e3a\u201c\u8bf7\u6c42\u52a8\u753b\u5e27\u201d\uff0c\u660e\u6446\u7740\u4e00\u526f\u5f88\u5c4c\u7684\u6837\u5b50\uff01<\/p>\n

\"\u5e73\u9759\u7684\u4f17\u4eba\"
\n\u3002\u3002\u3002\u3002\u6309\u7167\u8fd9\u79cd\u8bf4\u6cd5\uff0c\u201c\u6a31\u6843\u5c0f\u4e38\u5b50\u201d\u5c31\u662f\u6a31\u6843\u505a\u7684\u4e38\u5b50\u54af\uff0c\u6069\uff0c\u770b\u8111\u888b\u786e\u5b9e\u86ee\u50cf\u7684~<\/p>\n

\"\u6a31\u6843\u5c0f\u4e38\u5b50\u6c57\"
\n\u3002\u3002\u3002\u3002<\/p>\n

\u60f3\u5230\u660e\u5929\u5c31\u662f\u56fd\u5e86\u5927\u5047\uff0c\u4eca\u5929\u6211\u5c31\u5c0f\u4eba\u4e0d\u8bb0\u5927\u4eba\u8fc7\u3002\u7ed9\u4f60\u4eec\u6765\u526f\u9707\u7cbe\u7684\u56fe\uff1a<\/p>\n

\"\u5e27\u4e22\u5931\u793a\u610f\"<\/p>\n

\u76f8\u5f53\u4e00\u90e8\u5206\u7684\u6d4f\u89c8\u5668\u7684\u663e\u793a\u9891\u7387\u662f16.7ms<\/code>, \u5c31\u662f\u4e0a\u56fe\u7b2c\u4e00\u884c\u7684\u8282\u594f\uff0c\u8868\u73b0\u5c31\u662f\u201c\u6211\u548c\u4f60\u4e00\u6b65\u4e24\u6b65\u4e09\u6b65\u56db\u6b65\u5f80\u524d\u8d70\u2026\u2026\u201d\u3002\u5982\u679c\u6211\u4eec\u706b\u529b\u641e\u731b\u4e00\u70b9\uff0c\u4f8b\u5982\u641e\u4e2a10ms<\/code> setTimeout<\/code>\uff0c\u5c31\u4f1a\u662f\u4e0b\u9762\u4e00\u884c\u7684\u6a21\u6837\u2014\u2014\u6bcf\u7b2c\u4e09\u4e2a\u56fe\u5f62\u90fd\u65e0\u6cd5\u7ed8\u5236\uff08\u7ea2\u8272\u7bad\u5934\u6307\u793a\uff09\uff0c\u8868\u73b0\u5c31\u662f\u201c\u6211\u548c\u4f60\u4e00\u6b65\u4e24\u6b65 \u5751 \u56db\u6b65\u5f80\u524d\u8d70\u2026\u2026\u201d\u3002<\/p>\n

\u56ca\u7239(\u306a\u3093\u3067\u3088)\uff1f<\/p>\n

\u56fd\u5e86\u5317\u4eac\u9ad8\u901f\uff0c\u6700\u591a\u6bcf16.7s<\/code>\u901a\u8fc7\u4e00\u8f86\u8f66\uff0c\u7ed3\u679c\uff0c\u7a81\u7136\u63d2\u5165\u4e00\u6279setTimeout<\/code>\u7684\u519b\u8f66\uff0c\u5f3a\u884c\u898110s<\/code>\u901a\u8fc7\u3002\u663e\u7136\uff0c\u8fd9\u662f\u8d85\u8d1f\u8377\u7684\uff0c\u8981\u60f3\u987a\u5229\u8fdb\u884c\uff0c\u53ea\u80fd\u8ba9\u7b2c\u4e09\u8f86\u8f66\u76f4\u63a5\u6d88\u5931\uff08\u6b63\u5982\u663e\u793a\u7ed8\u5236\u7b2c\u4e09\u5e27\u7684\u4e22\u5931\uff09\u3002\u7136\uff0c\u8fd9\u662f\u4e0d\u73b0\u5b9e\u7684\uff0c\u4e8e\u662f\u5c31\u6709\u4e86\u4f1a\u5835\u8f66\uff01<\/p>\n

\u540c\u6837\u7684\uff0c\u663e\u793a\u566816.7ms<\/code>\u5237\u65b0\u95f4\u9694\u4e4b\u524d\u53d1\u751f\u4e86\u5176\u4ed6\u7ed8\u5236\u8bf7\u6c42<\/strong>(setTimeout<\/code>)\uff0c\u5bfc\u81f4\u6240\u6709\u7b2c\u4e09\u5e27\u4e22\u5931\uff0c\u7ee7\u800c\u5bfc\u81f4\u52a8\u753b\u65ad\u7eed\u663e\u793a\uff08\u5835\u8f66\u7684\u611f\u89c9\uff09\uff0c\u8fd9\u5c31\u662f\u8fc7\u5ea6\u7ed8\u5236\u5e26\u6765\u7684\u95ee\u9898\u3002\u4e0d\u4ec5\u5982\u6b64\uff0c\u8fd9\u79cd\u8ba1\u65f6\u5668\u9891\u7387\u7684\u964d\u4f4e\u4e5f\u4f1a\u5bf9\u7535\u6c60\u4f7f\u7528\u5bff\u547d\u9020\u6210\u8d1f\u9762\u5f71\u54cd\uff0c\u5e76\u4f1a\u964d\u4f4e\u5176\u4ed6\u5e94\u7528\u7684\u6027\u80fd\u3002<\/p>\n

\u8fd9\u4e5f\u662f\u4e3a\u4f55setTimeout<\/code>\u7684\u5b9a\u65f6\u5668\u503c\u63a8\u8350\u6700\u5c0f\u4f7f\u752816.7ms<\/code>\u7684\u539f\u56e0\uff0816.7 = 1000 \/ 60, \u5373\u6bcf\u79d260\u5e27\uff09\u3002<\/p>\n

\u800c\u6211requestAnimationFrame<\/code>\u5c31\u662f\u4e3a\u4e86\u8fd9\u4e2a\u800c\u51fa\u73b0\u7684\u3002\u6211\u6240\u505a\u7684\u4e8b\u60c5\u5f88\u7b80\u5355\uff0c\u8ddf\u7740\u6d4f\u89c8\u5668\u7684\u7ed8\u5236\u8d70\uff0c\u5982\u679c\u6d4f\u89c8\u8bbe\u5907\u7ed8\u5236\u95f4\u9694\u662f16.7ms<\/code>\uff0c\u90a3\u6211\u5c31\u8fd9\u4e2a\u95f4\u9694\u7ed8\u5236\uff1b\u5982\u679c\u6d4f\u89c8\u8bbe\u5907\u7ed8\u5236\u95f4\u9694\u662f10ms<\/code>, \u6211\u5c3110ms<\/code>\u7ed8\u5236\u3002\u8fd9\u6837\u5c31\u4e0d\u4f1a\u5b58\u5728\u8fc7\u5ea6\u7ed8\u5236\u7684\u95ee\u9898\uff0c\u52a8\u753b\u4e0d\u4f1a\u6389\u5e27\uff0c\u81ea\u7136\u6d41\u7545\u7684\u8bf4~~ <\/p>\n

\u5185\u90e8\u662f\u8fd9\u4e48\u8fd0\u4f5c\u7684\uff1a
\n\u6d4f\u89c8\u5668\uff08\u5982\u9875\u9762\uff09\u6bcf\u6b21\u8981\u6d17\u6fa1\uff08\u91cd\u7ed8\uff09\uff0c\u5c31\u4f1a\u901a\u77e5\u6211(requestAnimationFrame<\/code>)\uff1a\u5c0f\u4e38\u5b50\uff0c\u6211\u8981\u6d17\u6fa1\u4e86\uff0c\u4f60\u53ef\u4ee5\u8ddf\u6211\u4e00\u8d77\u6d17\u54e6\uff01<\/p>\n

\u8fd9\u662f\u8d44\u6e90\u975e\u5e38\u9ad8\u6548\u7684\u4e00\u79cd\u5229\u7528\u65b9\u5f0f\u3002\u600e\u4e48\u8bb2\u5462\uff1f<\/p>\n

    \n
  1. \u5c31\u7b97\u5f88\u591a\u4e2a\u5c0f\u4e38\u5b50\u8981\u4e00\u8d77\u6d17\u6fa1\uff0c\u6d4f\u89c8\u5668\u53ea\u8981\u901a\u77e5\u4e00\u6b21\u5c31\u53ef\u4ee5\u4e86\u3002\u800csetTimeout<\/code>\u8c8c\u4f3c\u662f\u591a\u4e2a\u72ec\u7acb\u7ed8\u5236\u3002<\/li>\n
  2. \u9875\u9762\u6700\u5c0f\u5316\u4e86\uff0c\u6216\u8005\u88abTab\u5207\u6362\u5173\u706f\u4e86\u3002\u9875\u9762\u662f\u4e0d\u4f1a\u6d17\u6fa1\u7684\uff0c\u81ea\u7136\uff0c\u5c0f\u4e38\u5b50\u4e5f\u4e0d\u4f1a\u6d17\u6fa1\u7684\uff08\u6ca1\u901a\u77e5\u554a\uff09\u3002\u9875\u9762\u7ed8\u5236\u5168\u90e8\u505c\u6b62\uff0c\u8d44\u6e90\u9ad8\u6548\u5229\u7528\u3002<\/li>\n<\/ol>\n

    \u80bf\u4e48\u6837\uff1frequestAnimationFrame<\/code>\u6851\u9ebb\u6211\u679c\u7136\u662f\u4e07\u5343\u8ff7\u4eba\u7684\u5427\uff01\uff01<\/p>\n

    \"\u4e0d\u9519\u54e6\uff0c\u56db\u57fa\u4f6c\u8868\u60c5\"
    \n\u8036\uff01\u679c\u7136\u6709\u6599\uff0c\u4e0d\u662f\u770b\u4e0a\u53bb\u7684\u5e73\u677f\u7535\u8111\u3002<\/p>\n

    \"\u82b1\u75f4
    \n\u5537~\u5938\u5f97\u4eba\u5bb6\u90fd\u4e0d\u597d\u610f\u601d\u4e86\uff01<\/p>\n

    \"\u5e73\u9759\u7684\u4f17\u4eba\"
    \n\u3002\u3002\u3002\u3002\u90a3\u4f60\u7684\u517c\u5bb9\u6027\u5982\u4f55<\/strong>\uff1f<\/p>\n

    \"\u6211\u554a
    \n\u6211\u7684\u517c\u5bb9\u6027\u554a~~ \u5b6c\uff0c\u89c1\u4e0b\u9762~<\/p>\n

    \"requestAnimationFrame\u7684\u517c\u5bb9\u6027\u8868<\/p>\n

    \"\u5e73\u9759\u7684\u4f17\u4eba\"
    \nAndroid\u8bbe\u5907\u538b\u6839\u5c31\u4e0d\u652f\u6301\u561b\uff01\u5176\u4ed6\u8bbe\u5907\u57fa\u672c\u4e0a\u8ddfCSS3\u52a8\u753b\u7684\u652f\u6301\u4e00\u6a21\u4e00\u6837\u561b\u3002<\/p>\n

    \u6211\u8bf4\u5c0f\u7f8e\u5973\uff0c\u636e\u6211\u6240\u77e5\uff0cCSS3 transition<\/code>\u6216animation<\/code>\u52a8\u753b\u4e5f\u662f\u8d70\u7684\u8ddf\u4f60\u4e00\u6837\u7684\u7ed8\u5236\u539f\u7406\uff08\u8865\u5145\u4e8e2013-10-09<\/strong>\uff1a\u6839\u636e\u81ea\u5df1\u540e\u6765\u7684\u6d4b\u8bd5\uff0c\u53d1\u73b0\uff0cCSS3\u52a8\u753b\u5728Tab\u5207\u6362\u56de\u6765\u7684\u65f6\u5019\uff0c\u52a8\u753b\u8868\u73b0\u5e76\u4e0d\u6682\u505c\uff1b\u901a\u8fc7Chrome frames\u5de5\u5177\u6d4b\u8bd5\u53d1\u73b0\uff0cTab\u5207\u6362\u4e4b\u540e\uff0c\u8ba1\u7b97\u6e32\u67d3\u7ed8\u5236\u90fd\u505c\u6b62\uff0cTab\u5207\u6362\u56de\u6765\u65f6\u4f3c\u4e4e\u901a\u8fc7\u5185\u7f6eJS\u8ba1\u7b97\u4e86\u52a8\u753b\u4f4d\u7f6e\u5b9e\u73b0\u91cd\u7ed8\uff0c\u9020\u6210\u52a8\u753b\u4e0d\u6682\u505c\u7684\u611f\u89c9\uff09\u3002\u4f46\u662f\u4eba\u5bb6\u7684\u5b9e\u73b0\u8f7b\u677e\u5f88\u591a\u554a\uff0c\u800c\u4e14\u76f8\u5f53\u5f3a\u5927\uff0c\u90a3\u4f60\u8fd8\u6709\u4e2a\u6bdb\u7ebf\u7528\uff01\u4f60\u8be5\u60f3\u60f3\u4f60\u4e00\u76f4\u9c9c\u6709\u4eba\u95ee\u6d25\u7684\u539f\u56e0\u4e86\uff01<\/p>\n

    \u4e8c\u3001\u53cd\u51fb\u5427\uff0crequestAnimationFrame\u540c\u5b66<\/h3>\n

    \"\u53cd\u51fb\"
    \n\u57fa\u4f6c\u4eec\uff0c\u4f60\u4eec\u7684\u773c\u754c\u592a\u72ed\u9698\u4e86\uff0c\u89c2\u70b9\u592a\u80a4\u6d45\u7684\u3002\u9996\u5148\u4ece\u54f2\u5b66\u5b8f\u89c2\u8bb2\uff0c\u4e8b\u7269\u5b58\u5728\u5fc5\u6709\u5176\u9053\u7406\u3002\u56e0\u6b64\uff0c\u672c\u5927\u4eba\u80af\u5b9a\u662f\u6709\u4ef7\u503c\u7684\u3002<\/p>\n

    \"\u5e73\u9759\u7684\u4f17\u4eba\"
    \n\u90a3\u4f60\u5230\u8bf4\u8bf4\u4f60\u6709\u7eb3\u5c3c\u4ef7\u503c~~~<\/p>\n

    \"\u53cd\u51fb\"
    \n\u51c6\u5907\u597d\u4e86\u6728\u6709\uff0c\u5f85\u4f1a\u513f\u8bf4\u51fa\u6765\u5413\u6b7b\u4f60\u4eec\u3002\u542c\u597d\u4e86\uff0c\u8db3\u8db3\u67093\u5927\u70b9\uff1a
    \n1. \u7edf\u4e00\u7684\u5411\u4e0b\u517c\u5bb9\u7b56\u7565<\/strong>
    \n\u867d\u8bf4CSS3\u5b9e\u73b0\u52a8\u753b\u5373\u9ad8\u6548\u53c8\u65b9\u4fbf\uff0c\u4f46\u662f\u5bf9\u4e8ePC\u6d4f\u89c8\u5668\uff0cIE8, IE9\u4e4b\u6d41\uff0c\u4f60\u60f3\u517c\u5bb9\u5b9e\u73b0\u67d0\u4e9b\u52a8\u753b\u6548\u679c\uff0c\u6bd4\u65b9\u8bf4\u6de1\u5165\u6de1\u51fa\uff0c\u6562\u95ee\uff0c\u4f60\u600e\u4e48\u5b9e\u73b0\uff1f<\/p>\n

    \u770b\u4f60\u4eec\u90a3\u526f\u5446\u82e5\u6728\u9e21\u7684\u8868\u60c5\u5c31\u77e5\u9053\u4e86\uff0cIE10+ CSS3\u5b9e\u73b0\uff0cIE9-\u4e4b\u6d41JS setTimeout<\/code>\u5b9e\u73b0\uff0c\u6211\u8bf4\u7d2f\u4e0d\u7d2f\u554a\uff0c\u4e24\u5957\u5b8c\u5168\u4e0d\u540c\u7684style. \u4f60\u6539\u4e0b\u52a8\u753b\u65f6\u95f4\u662f\u4e0d\u662f\u8981\u6539\u4e24\u5904\uff1f\u4f46\u662f\u6211requestAnimationFrame<\/code>\u8ddfsetTimeout<\/code>\u975e\u5e38\u7c7b\u4f3c\uff0c\u90fd\u662f\u5355\u56de\u8c03\uff0c\u7528\u6cd5\u4e5f\u7c7b\u4f3c\u3002<\/p>\n

    \n
    var handle = setTimeout(renderLoop, PERIOD);<\/pre>\n<\/div>\n
    \n
    var handle = requestAnimationFrame(renderLoop);<\/pre>\n<\/div>\n
    \u6211requestAnimationFrame<\/code>\u8c03\u7528\u4e00\u6b21\u53ea\u4f1a\u91cd\u7ed8\u4e00\u6b21\u52a8\u753b\uff0c\u56e0\u6b64\uff0c\u5982\u679c\u60f3\u8981\u5b9e\u73b0\u8054\u7cfb\u52a8\u753b\uff0c\u5c31\u4f7f\u7528renderLoop<\/code>\u53cd\u590d\u8e42\u8e8f\u6211\u5427~<\/p>\n
    \"\u53d7\u8650\"<\/p>\n
    So\uff0c\u5982\u679c\u60f3\u8981\u7b80\u5355\u7684\u517c\u5bb9\uff0c\u53ef\u4ee5\u8fd9\u6837\u5b50\uff1a<\/p>\n
    \n
    window.requestAnimFrame = (function(){\r\n  return  window.requestAnimationFrame       ||\r\n          window.webkitRequestAnimationFrame ||\r\n          window.mozRequestAnimationFrame    ||\r\n          function( callback ){\r\n            window.setTimeout(callback, 1000 \/ 60);\r\n          };\r\n})();\r\n<\/pre>\n<\/div>\n
    \u4f46\u662f\u5462\uff0c\u5e76\u4e0d\u662f\u6240\u6709\u8bbe\u5907\u7684\u7ed8\u5236\u65f6\u95f4\u95f4\u9694\u662f1000\/60 ms<\/code>, \u4ee5\u53ca\u4e0a\u9762\u5e76\u6728\u6709cancel\u76f8\u5173\u65b9\u6cd5\uff0c\u6240\u4ee5\uff0c\u5c31\u6709\u4e0b\u9762\u8fd9\u4efd\u66f4\u5168\u9762\u7684\u517c\u5bb9\u65b9\u6cd5\uff1a<\/p>\n
    \n
    (function() {\r\n    var lastTime = 0;\r\n    var vendors = ['webkit', 'moz'];\r\n    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {\r\n        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];\r\n        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||    \/\/ Webkit\u4e2d\u6b64\u53d6\u6d88\u65b9\u6cd5\u7684\u540d\u5b57\u53d8\u4e86<\/span>\r\n                                      window[vendors[x] + 'CancelRequestAnimationFrame'];\r\n    }\r\n\r\n    if (!window.requestAnimationFrame) {\r\n        window.requestAnimationFrame = function(callback, element) {\r\n            var currTime = new Date().getTime();\r\n            var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));\r\n            var id = window.setTimeout(function() {\r\n                callback(currTime + timeToCall);\r\n            }, timeToCall);\r\n            lastTime = currTime + timeToCall;\r\n            return id;\r\n        };\r\n    }\r\n    if (!window.cancelAnimationFrame) {\r\n        window.cancelAnimationFrame = function(id) {\r\n            clearTimeout(id);\r\n        };\r\n    }\r\n}());<\/pre>\n<\/div>\n
    \u4e0aJS\u53ef\u70b9\u51fb\u8fd9\u91cc<\/a>\u4e0b\u8f7d\u3002<\/p>\n
    \u7136\u540e\uff0c\u6211\u4eec\u5c31\u53ef\u4ee5\u4ee5\u4f7f\u7528setTimeout<\/code>\u7684\u8c03\u8c03\u4f7f\u7528requestAnimationFrame<\/code>\u65b9\u6cd5\u5566\uff0cIE6\u4e5f\u80fd\u652f\u6301\u54e6\uff01<\/p>\n
    \"\u4e0d\u9519\u54e6\uff0c\u56db\u57fa\u4f6c\u8868\u60c5\"
    \n\u8036\u8036\u8036\uff01\u2026\u2026<\/p>\n
    \"\u627f\u8499\u8d4f\u8bc6
    \n\u591a\u8c22\u6367\u573a\uff01(*^__^*) \u563b\u563b\u2026\u2026<\/p>\n
    2. CSS3\u52a8\u753b\u4e0d\u80fd\u5e94\u7528\u6240\u6709\u5c5e\u6027<\/strong>
    \n\u4f7f\u7528CSS3\u52a8\u753b\u53ef\u4ee5\u6539\u53d8\u9ad8\u5bbd\uff0c\u65b9\u4f4d\uff0c\u89d2\u5ea6\uff0c\u900f\u660e\u5ea6\u7b49\u7b49\u3002\u4f46\u662f\uff0c\u5c31\u50cf\u516d\u9053\u5e26\u571f\u4e5f\u6709\u5f31\u70b9\u4e00\u6837\uff0cCSS3\u52a8\u753b\u4e5f\u6709\u5c5e\u6027\u97ad\u957f\u83ab\u53ca\u3002\u6bd4\u65b9\u8bf4scrollTop<\/code>\u503c\u3002\u5982\u679c\u6211\u4eec\u5e0c\u671b\u8fd4\u56de\u9876\u90e8\u662f\u4e2a\u5e73\u6ed1\u6eda\u52a8\u6548\u679c\uff0c\u5c31\u76ee\u524d\u800c\u8a00\uff0cCSS3\u4f3c\u4e4e\u662f\u65e0\u80fd\u4e3a\u529b\u7684\u3002\u6b64\u65f6\uff0c\u8fd8\u662f\u8981JS\u51fa\u9a6c\uff0c\u52bf\u5fc5\uff0c\u6211requestAnimationFrame<\/code>\u5927\u4eba\u5c31\u53ef\u4ee5\u5927\u653e\u5f02\u5f69\uff0c\u4e07\u4f17\u77a9\u76ee\u5566\uff0c\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8~~<\/p>\n
    \"\u54c8\u54c8\u54c8\u54c8~~\"<\/p>\n
    \u6bd4\u65b9\u8bf4\u70b9\u4e0b\u9762\u8fd9\u4e2a\u6309\u94ae\uff0c\u6eda\u4e0a\u53bb\u518d\u6eda\u4e0b\u6765\uff0c\u54c8\u54c8~
    \n
    \n