WebGL 动画

阅读更多

有一种动画书，就是快速翻动就可以看见里面的内容运动起来了。电脑动画和这个差不多，通过在动画区域内用一张新的图片代替旧的图片，并快速持续的改变，根据视觉暂留现象就在我们的大脑中形成了动画。

 

HTML5里面，我们通过下面的语句来实现画面的更替：

 

window.requestAnimationFrame()

还是一脸懵逼？我们先用代码把第一段话翻译一下吧：

首先，我们通过init方法绑定到body的onload事件，实现整个webgl画布和其他的初始化。里面关键第4点，使用 window.requestAnimationFrame语句来实现画面的刷新，该语句有个参数是个回调函数，在该函数中实现刷新逻辑，这里我们编写了animation方法实现。该回调方法通常、大致做几件事情：把冰箱门打开、把原来的大象拿出来,（读者：说人话。作者：请看注释）。好了，言归正传，是不是很简单。根据这个思路，我们把这个代码完善一下，画一根秒针——旋转的金箍棒。

 

效果如下所示：

 

秒针转动的线条

原文地址：http://blog.techcave.cn/2017/09/14/WebGL-%E5%8A%A8%E7%94%BB/