一帧一帧的来渲染这个元素，而且这个元素每一帧的位置都不一样，我们的眼睛看到的就是动画了。实现起来也很方便，js提供了两个方法：setTimeout 和setInterval都可以实现，但是一个有逼格的程序员实现动画是不会用这两个方法的，而是用requestAnimationFrame这个方法。有什么区别呢？下面简单做个比较。
setInterval(myFun, 10); 意思是隔一毫秒执行一个myFun函数，但是这样就有一个问题了，比如我myFun函数里面绘制的东西比较耗时，而10ms之内还没有完全绘制出来，但是这段代码强制1ms之后又开始绘制下一帧了，所以就会出现丢帧的问题；反之，如果时间设置太长，就会出现画面不流畅、视觉卡顿的问题。
requestAnimationFrame(myFun); 如果我们这样写，又是什么意思呢？意思是根据一定的时间间隔，会自动执行myFun函数来进行绘制。这个”一定的时间间隔”就是根据浏览器的性能或者网速快慢来决定了，总之，它会保证你绘制完这一帧，才会绘制下一帧，保证性能的同时，也保证动画的流畅。
这些API已经包含了大部分常用的了，结合requestAnimationFrame函数已经可以绘制很多酷炫的效果了。但是光看这些API很简单，但是想要在绘制游戏或者动画中用起来得心应手还需要看大量的实例，自己实践总结的。
本文就到这里，感谢各位看官～
相关文章
精彩导读
热门资讯
关注我们
