{"action":"created","issue":{"url":"https://api.github.com/repos/itboos/accumulation/issues/11","repository_url":"https://api.github.com/repos/itboos/accumulation","labels_url":"https://api.github.com/repos/itboos/accumulation/issues/11/labels{/name}","comments_url":"https://api.github.com/repos/itboos/accumulation/issues/11/comments","events_url":"https://api.github.com/repos/itboos/accumulation/issues/11/events","html_url":"https://github.com/itboos/accumulation/issues/11","id":306221672,"node_id":"MDU6SXNzdWUzMDYyMjE2NzI=","number":11,"title":"Css 相关的","user":{"login":"itboos","id":21290640,"node_id":"MDQ6VXNlcjIxMjkwNjQw","avatar_url":"https://avatars1.githubusercontent.com/u/21290640?v=4","gravatar_id":"","url":"https://api.github.com/users/itboos","html_url":"https://github.com/itboos","followers_url":"https://api.github.com/users/itboos/followers","following_url":"https://api.github.com/users/itboos/following{/other_user}","gists_url":"https://api.github.com/users/itboos/gists{/gist_id}","starred_url":"https://api.github.com/users/itboos/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/itboos/subscriptions","organizations_url":"https://api.github.com/users/itboos/orgs","repos_url":"https://api.github.com/users/itboos/repos","events_url":"https://api.github.com/users/itboos/events{/privacy}","received_events_url":"https://api.github.com/users/itboos/received_events","type":"User","site_admin":false},"labels":[{"id":870974321,"node_id":"MDU6TGFiZWw4NzA5NzQzMjE=","url":"https://api.github.com/repos/itboos/accumulation/labels/%E7%A7%AF%E7%B4%AF","name":"积累","color":"0e8a16","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2018-03-18T08:13:49Z","updated_at":"2018-09-07T09:17:17Z","closed_at":null,"author_association":"OWNER","body":"## 一些网站:\r\n[html5rocks-tutorials](https://www.html5rocks.com/en/tutorials/)\r\n[html5rocks.com](https://www.html5rocks.com/en/tutorials/getusermedia/intro/)\r\n[Capturing Audio & Video in HTML5](https://www.html5rocks.com/en/tutorials/getusermedia/intro/)\r\n[simpl.info](https://simpl.info/)\r\n\r\n\r\n\r\n\r\n### requestAnimationFrame\r\n```\r\n链接：\r\n[细说Web API中的Blob](https://blog.csdn.net/xuchaobei123/article/details/78244409) \r\n\r\n图片:\r\n\r\n![](http://5f5798ab-970a-4eec-9314-b80402b89605.jpg@200w_200h.jpg)\r\n\r\n```\r\n[MDN上说明](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)\r\n    \r\n     style: \r\n    .box {\r\n      width: 200px;\r\n      height: 200px;\r\n      background: red;\r\n      position: absolute;\r\n    }\r\n\r\n   \r\n 一个div无限左右滑动的动画:\r\n\r\n```javascript\r\n   // 使用这个API，一旦页面不处于浏览器的当前标签，就会自动停止刷新。这就节省了CPU、GPU和电力。\r\n   // 兼容性处理\r\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                  // 回调函数执行的时间约等于浏览器的刷新频率， 一般浏览器的刷新频率在1s 60次, 即回调函数约会1s执行60次， 具体的值取决于浏览器的刷新频率, 这样可以节省性能\r\n                };\r\n      })();\r\n\r\n      var e = document.querySelector(\".box\");\r\n      var flag = true;\r\n      var count = 0;\r\n      var left = 0;\r\n      function render() {\r\n        left == 0 ? flag = true : left == 300 ? flag = false : '';\r\n        flag ? e.style.left = ` ${left++}px` :\r\n              e.style.left = ` ${left--}px`;\r\n      }\r\n\r\n      function render2() {\r\n        left == 0 ? flag = true : left == 600 ? flag = false : '';\r\n        flag ? ((e.style.left = ` ${left++}px`) && (e.style.bottom = ` ${left++}px`)) :\r\n              ((e.style.left = ` ${left--}px`) && (e.style.bottom = ` ${left--}px`));\r\n      }\r\n\r\n      (function animloop(stmp) {\r\n          count ++ ;\r\n          render();\r\n          console.log(`动画执行:${count}----${stmp}`);\r\n          requestAnimFrame(animloop); // 浏览器在执行下一次从绘前会调用那个回调函数\r\n      })();\r\n```\r\ncancelAnimationFrame方法: 用于取消重绘。\r\n```javascript\r\n     window.cancelAnimationFrame(requestID);\r\n    它的参数是requestAnimationFrame返回的一个代表任务ID的整数值。\r\n```\r\n如何停止动画?\r\n    当达到某个条件时， 我们需要停止动画, 只需要在符合某个条件， 变不再执行requestAnimationFrame即可\r\n```javascript\r\n    var gid = 0;\r\n    gid =  requestAnimationFrame(callback);  // 这个gid是递增的\r\n    if (count === 100) { // 执行到100 次时，停止动画，清除requestAnimationFrame 操作(因为它会定时调用我们的回调函数)\r\n            // window.cancelAnimationFrame(gId);\r\n            return;\r\n      }\r\n```\r\n\r\n参考链接:\r\n[阮一峰-requestAnimationFrame](http://javascript.ruanyifeng.com/htmlapi/requestanimationframe.html)\r\n[张旭鑫-CSS3动画那么强，requestAnimationFrame还有毛线用？](http://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3%95/)\r\n[更加健壮的polyfill  ](https://segmentfault.com/a/1190000013424101)\r\n``` js\r\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 =\r\n          window[vendors[x]+'CancelAnimationFrame'] || 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 - (currTime - lastTime));\r\n            var id = window.setTimeout(function() { 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\r\n```"},"comment":{"url":"https://api.github.com/repos/itboos/accumulation/issues/comments/419377546","html_url":"https://github.com/itboos/accumulation/issues/11#issuecomment-419377546","issue_url":"https://api.github.com/repos/itboos/accumulation/issues/11","id":419377546,"node_id":"MDEyOklzc3VlQ29tbWVudDQxOTM3NzU0Ng==","user":{"login":"itboos","id":21290640,"node_id":"MDQ6VXNlcjIxMjkwNjQw","avatar_url":"https://avatars1.githubusercontent.com/u/21290640?v=4","gravatar_id":"","url":"https://api.github.com/users/itboos","html_url":"https://github.com/itboos","followers_url":"https://api.github.com/users/itboos/followers","following_url":"https://api.github.com/users/itboos/following{/other_user}","gists_url":"https://api.github.com/users/itboos/gists{/gist_id}","starred_url":"https://api.github.com/users/itboos/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/itboos/subscriptions","organizations_url":"https://api.github.com/users/itboos/orgs","repos_url":"https://api.github.com/users/itboos/repos","events_url":"https://api.github.com/users/itboos/events{/privacy}","received_events_url":"https://api.github.com/users/itboos/received_events","type":"User","site_admin":false},"created_at":"2018-09-07T09:17:17Z","updated_at":"2018-09-07T09:17:17Z","author_association":"OWNER","body":"[CSS和JS动画的引擎盖+如何优化其性能](https://blog.sessionstack.com/how-javascript-works-under-the-hood-of-css-and-js-animations-how-to-optimize-their-performance-db0e79586216)"}}
{"actor":{"display_login":"itboos"}}