webGL 动画


动画

旋转三角形

将矩阵变换运用到动画图形中去。为了让一个三角形转动起来,我们需要做的是:不断擦除和重绘三角形,并且在每次重绘时轻微地改变其角度。

![](note_img/2019-11-26-17-19-59.png)

为了生成动画,我们需要两个关键机制:

  1. 在t0, t1, t2, t3, t4 等时刻反复调用同一个函数来绘制三角形.
  2. 每次绘制之前,清除上次绘制的内容,并使三角形旋转相应的角度.
// 顶点着色器
var VSHADER_SOURCE = 
    'attribute vec4 a_Position;\n' +
    'uniform mat4 u_ModelMatrix;\n' +
    'void main() {\n' +
    '    gl_Position = u_ModelMatrix * a_Position;\n' +
    '}\n';
// 当前已经转动的角度 
var currentAngle = 0.0;
// 创建一个 Matrix4 对象。
var modelMatrix = new Matrix4();

var tick = function() {
    // 获取新的旋转角度
    currentAngle = animate(currentAngle);
    // currentAngle = currentAngle + 1.0;
    draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix);
    // 对浏览器发起一次请求,请求在未来某个适当的时机调用 tick 函数
    requestAnimationFrame(tick, canvas);
};
tick();

draw 函数

function draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix) {
    // 将Matrix4实例设置为旋转变换矩阵
    modelMatrix.setRotate(currentAngle, 0, 0, 1);
    // modelMatrix.translate(0.35, 0, 0);
    gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);

    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, n);
}

![](note_img/2019-11-27-09-48-47.png)

更新 currentAngle
currentAngle = animate(currentAngle);

var g_last = Date.now();
function animate(angle) {
    var now = Date.now();
    var elapsed = now - g_last;
    g_last = now;
    var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;

    return newAngle %= 360;
}
  • 由于 requestAnimationFrame() 只是请求浏览器在适当的时机调用参数
  • 绘制三角形的时间间隔不是固定
  • 加上一个固定的角度值会导致不可控制的加速或者减速的旋转效果
  • 变量 gl_last 和 now 都是 Data 对象的 now() 方法的返回值
  • 所以才有通过 elapsed 除 100 乘 ANGLE_STEP 来计算旋转角度
  • 返回这一帧的旋转角度 newAngle 的同时,还需要保证它始终小于360度
告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行

为了提高性能和电池寿命,因此在大多数浏览器里,当requestAnimationFrame() 运行在后台标签页或者隐藏的<iframe> 里时,requestAnimationFrame() 会被暂停调用以提升性能和电池寿命。

requestAnimationFrame(callback)
参数: callback
返回: Request id
函数作用:对浏览器发起一次请求,请求在未来某个适当的时机调用 callback 函数

取消请求:cancelAnimationFrame(RequestID)

声明:UX|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - webGL 动画


心无旁骛似明镜