本文介绍了如何使用requestAnimationFrame进行高效动画更新，该方法与setTimeout相似但与浏览器刷新同步，适合与CSS动画配合。同时阐述了WebGL中创建和管理缓冲区的步骤，包括缓冲区的创建、数据写入、着色器变量绑定及stride和offset的使用。通过缓冲区和raf，可以实现复杂动画效果并优化性能。
收获
- 使用requestAnimationFrame更新帧：
简称raf；与raf更像计时器中的setTimeOut,需要在函数内部合适的时机再次调用已达到循环的目的，与循环计时器相比，raf执行频率默认等同于浏览器刷新频率，执行时机在页面重绘时，可以和css动画一起播放。使用时要考虑到高刷屏幕下更新速度快的情况，在更新动画时，要使用callback的回传参数的 - 创建多个缓冲区对象：创建缓冲区的5个步骤1.创建buffer 2.指定buffer用法 3.写入数据 4.绑定着色器变量的指针 5.开启 创建多个缓冲区只需按顺序重复5个步骤即可，必须创建成功(开启)一个buffer才可继续创建下一个
- stride和offset：webgl中的FLOAT大小为4，每一个顶点数据假如为3个那么stride大小应该设为34；offset表示当前数据项距离首个元素的距离，顶点数组中，假设数组中顶点坐标在0,1 尺寸在2的位置，那么顶点的offset为0，大小的offset为24.
总结
基础动画就是分析转换，复杂的拆分成单个的，利用矩阵，raf使图像动起来。对于同一个顶点数据的数组中，可以同时包含顶点坐标和size数据，这样只用创建一个缓冲区，通过stride和offset分别指定不同数据所在位置
903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
