最近学习了requestAnimationFrame，看了张鑫旭直白易懂，但是某些地方语言过于裸露的文章http://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3%95/，文章里的例子：http://www.zhangxinxu.com/study/201309/requestanimationframe-tween-easeoutbounce.html让我觉得这个requestAnimationFrame很厉害，虽然我对动画的接触还不多，但是我会努力的。
requestAnimationFrame是什么么？
requestAnimationFrame 是专门为实现高性能的帧动画而设计的一个API：
说简单点
-
- setInterval、setTimeout是开发者主动要求浏览器去绘制，但是由于种种问题，浏览器可能会漏掉部分命令
- requestAnimationFrame 就是浏览器什么要开始绘制了浏览器自己知道，通过requestAnimationFrame 告诉开发者，这样就不会出现重复绘制丢失的问题了
- requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧
- 隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。
- requestAnimationFrame也会像setTimeout一样有一个返回值ID用于取消，可以把它作为参数传入cancelAnimationFrame函数来取消requestAnimationFrame的回调
下面是一个简单的例子：
<!doctype html><img id="book" style="background:red;opacity:1;position: relative; left: 500px;" width="100" height="123" data-mce-style="background: red; opacity: 1; position: relative; left: 500px;" /><div id="several"><br /></div><script type="text/javascript">
var book = document.getElementById(‘book‘)
var several = document.getElementById(‘several‘);
animate(book, {
left: 50,
duration: 2000
})
function animate(elem, options){
//动画初始值
var start = 500
//动画结束值
var end = options.left
//动画id
var timerId;
var createTime = function(){
return (+new Date)
}
//动画开始时间
var startTime = createTime();
function runCode(cod1) {
var cod = window.document.all(cod1)
var code = cod.value;
var newwin = window.document.open(‘‘, ‘‘, ‘‘);
newwin.opener = null
newwin.document.write(code);
newwin.document.close();
}
var i = 0;
function tick(){
i++;
several.innerHTML = ‘setInterval调用次数:‘ + i;
//每次变化的时间
var remaining = Math.max(0, startTime + options.duration - createTime())
var temp = remaining / options.duration || 0;
var percent = 1 - temp;
var stop = function(){
//停止动画
clearInterval(timerId);
timerId = null;
}
var setStyle = function(value){
elem.style[‘left‘] = value + ‘px‘
}
//移动的距离
var now = (end - start) * percent + start;
if(percent === 1){
setStyle(now)
stop();
}else{
setStyle(now)
}
}
//开始执行动画
var timerId = setInterval(tick, 13);
}
</script>
我做了个练习：
每隔1s长生一个小方块，让其匀速下落，落到底部消失，如果碰到底部中间的方块，小方块消失，分数加1，这个例子还有很多不足的地方，我会继续完善：
1 <script>
2 window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
3 var h=0; var timer=setInterval(function(){
4 if(h>40){
5 clearInterval(timer);return;
6 }else{
7 h+=1;
8 var isSucceed;
9 var isOnBelow;
10 var isStillOn;
11 var dotX;
12 var dot=new Dot();
13 dotX=dot.getName();
14 isStillOn=true;
15 animate(dot.dom, {
16 top: window.innerHeight-dot.dom.offsetHeight,
17 duration: 3000
18 });
19 function animate(elem, options){
20 //动画初始值
21 var start = 0
22 //动画结束值
23 var end = options.top
24 var createTime = function(){
25 return (+new Date)
26 }
27 //动画开始时间
28 var startTime = createTime();
29 var timerId;
30 //开始动画
31 var startAnim = function() {
32 timerId = requestAnimationFrame(tick,15);
33 }
34 //停止动画
35 var stopAnim = function() {
36 cancelAnimationFrame(timerId)
37 }
38 var number=0;
39 var isRemove=true;
40 function tick(){
41 number++;
42 //每次变化的时间
43 var remaining = Math.max(0, startTime + options.duration - createTime())
44 var temp = remaining / options.duration || 0;
45 var percent = 1 - temp;
46 var setStyle = function(value){
47 elem.style[‘top‘] = value + ‘px‘;
48 var centerW=center.offsetLeft;
49 var centerH=center.offsetTop;
50 if(value>=(centerH-42)){
51 isOnBelow=true;
52 }else{
53 isOnBelow=false;
54 }
55 if(dotX>=(centerW-50)&&dotX<=(centerW+200)){
56 isSucceed=true;
57 }else{
58 isSucceed=false;
59 }
60 }
61 if(isRemove&&isOnBelow&&isSucceed){
62 isRemove=false;
63 stopAnim() ;
64 document.getElementById("view").removeChild(elem);
65 isStillOn=false;
66 count++;
67 document.getElementById("count").innerHTML="总分为:"+count+"分";
68 }
69 //移动的距离
70 var now = (end - start) * percent + start;
71 if(percent === 1){
72 setStyle(now);
73 if(isStillOn){
74 document.getElementById("view").removeChild(elem);
75 }
76 stopAnim() ;
77 }else{
78 setStyle(now);
79 startAnim(tick);
80 }
81 }
82 //开始执行动画
83 startAnim(tick);
84 }
85 }},1000)
86 document.getElementById("center").addEventListener("touchmove",function(e){
87 var touch=e.targetTouches[0].pageX;
88 // if(touch<0){touch=100;}
89 // if(touch>(document.body.clientWidth-center.clientWidth)){touch=document.body.clientWidth-center.clientWidth+100}
90 document.getElementById("center").style.left=touch+"px";
91 });
92
93 </script>