Simple color animation

这是一个非常基础的WebGL色彩动画案例,通过定时器来逐秒填充不同的颜色来实现。

通过填充实现色彩动画

本案例使用WebGL来实现简单的色彩动画和用户交互效果,用户可以通过按按钮来开始/暂停/重新开始动画。

我们把 WebGL函数放在一个定时循环器里 (setInterval)。通过监听点击事件来让用户开始/暂停动画。并通过定时器来循环执行绘制指令 (通常是逐帧动画,这次我们设置为逐秒动画)

<p>一个色彩动画的简单 WebGl 程序</p>
<p>点击下面的按钮来开/关动画</p>
<canvas id="canvas-view">你的浏览器不支持 Html5 canvas</canvas>
<button id="animation-onoff">
  点我来
<strong>[verb goes here]</strong>
  动画
</button>
body {
  text-align : center;
}
canvas {
  display : block;
  width : 280px;
  height : 210px;
  margin : auto;
  padding : 0;
  border : none;
  background-color : black;
}
button {
  display : inline-block;
  font-size : inherit;
  margin : auto;
  padding : 0.6em;
}
window.addEventListener("load", function setupAnimation (evt) {
  "use strict"
  window.removeEventListener(evt.type, setupAnimation, false);

  // 定义一个变量来保存定时器,以播放动画
  var timer;

  // 点击事件处理器
  var button = document.querySelector("#animation-onoff");
  var verb = document.querySelector("strong");
  function startAnimation(evt) {
    button.removeEventListener(evt.type, startAnimation, false);
    button.addEventListener("click", stopAnimation, false);
    verb.innerHTML="暂停";
    //设置一个循环来逐秒渲染动画
    timer = setInterval(drawAnimation, 1000);
    // 在用户点击完以后立即执行一次动画
    drawAnimation();
  }
  function stopAnimation(evt) {
    button.removeEventListener(evt.type, stopAnimation, false);
    button.addEventListener("click", startAnimation, false);
    verb.innerHTML="开始";
    // 通过清除定时器来停止动画
    clearInterval(timer);
  }
  // 调用 stopAnimation() 来初始化按钮的事件处理器
  stopAnimation({type: "click"});

  var gl;
  function drawAnimation () {
    if (!gl) {
      var canvas = document.getElementById("canvas-view");
      gl = canvas.getContext("webgl")
        ||canvas.getContext("experimental-webgl");
      if (!gl) {
        clearInterval(timer);
        alert("Failed to get WebGL context.\n"
          + "Your browser or device may not support WebGL.");
        return;
      }
      gl.viewport(0, 0,
        gl.drawingBufferWidth, gl.drawingBufferHeight);
    }

    // 使用辅助函数 得到随机颜色
    var color = getRandomColor();
    // 将随机颜色设置到 WebGL 渲染上下文的填充颜色上去
    gl.clearColor(color[0], color[1], color[2], 1.0);
    // 使用新设置的颜色来清除上下文
    gl.clear(gl.COLOR_BUFFER_BIT);
  }

  //获取随机颜色的辅助函数
  function getRandomColor() {
    return [Math.random(), Math.random(), Math.random()];
  }
}, false);

GitHub.上查看源码