感觉写这篇还挺是时候的，虽然本应该在上一篇之后就应该写这篇的。一直拖到现在，拖到了网易”被拖“。
上篇中说到使用aes加密，但是无论如何他还是很容易破解的，而且可以说无难度破解，首先如果想在传输过程中破解，就算你是传输的加密的数据，但是他只要同时劫持到你的js，看一下加密的方式，就可以反向破解出来，是没有任何难度，那么你加密不加密都是没有意义的。原因主要是因为aes本身采用的是对称加密方式，所以会产生上面的结果。所以我们使用rsa加密，但rsa加密过程计算量比较大，比较慢，可以用它来加密小量信息，所以我们可以用它来加密aes的key，然后在用aes加密，这样就算劫持到破解难度也增加到了破解rsa加密上去了，理论上还是很有难度的。如图：
rsa aes
在很久很久以前我们页面动画是这个样子的
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>requestAnimationFrame</title> <style> #box { width: 50px; height: 50px; border: 1px solid #666; margin-left: 10px; } </style> </head> <body> <div id="box"></div> <button id="btn">点我 点我</button> <script> var box = document.getElementById('box'), btn = document.getElementById('btn'), left = 0, id; //用setTimeout 方法实现 btn.onclick = function() { go(); } function go() { if(left <= 300 ){ var timer = setTimeout(animation, 1000 / 60); // } else { clearTimeout(timer) } } function animation() { left += 10; box.style.marginLeft = left + 'px'; go(); } </script> </body> </html> |
但是这样做有几个问题，就是
于是乎作为现代人的我们，有了新的解决方法就是利用 requestAnimationFrame
直接上代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>requestAnimationFrame</title> <style> #box { width: 50px; height: 50px; border: 1px solid #666; margin-left: 10px; } </style> </head> <body> <div id="box"></div> <button id="btn">点我 点我</button> <script> var box = document.getElementById('box'), btn = document.getElementById('btn'), left = 0, id; // requestAnimationFrame 实现 window.requestAnimationFrame = (function() { return window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || function(callback) { id = window.setTimeout(callback, 1000 / 60); // return id; }; })(); window.cancelAnimationFrame = (function() { return window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || function(id) { window.clearTimeout(id); } })(); btn.onclick = function() { requestAnimationFrame(step); } function step() { left += 10; box.style.marginLeft = left + 'px'; id = requestAnimationFrame(step); if(left > 300) { cancelAnimationFrame(id); } } </script> </body> </html> |
针对不同浏览器做了兼容，可以说从IE6开始支持，那么requestAnimationFrame有什么好处呢，
上面demo针对不同浏览器做了兼容，同时也写了取消事件。其实主要就这两个属性，很容易掌握。
ps: 其实开始研究的时候有个疑惑的地方，requestAnimationFrame 他没有时间这个参数，如果想要达到越来越快的效果怎么办。其实很简单，换个角度，以运动距离为参考，不断加大运动间距就ok啦。
参考：