【愚公系列】2024年02月 WEBGL专题-动画效果

愚公搬代码

发布于 2025-05-28 16:54:03

11700

代码可运行

文章被收录于专栏：历史专栏历史专栏

运行总次数：0

代码可运行

🚀前言

动画效果是指通过图形、图像或视频的运动、变换或其他视觉元素的改变来呈现出一种动态的视觉效果。它可以使图像或视频更加生动、吸引人，并能够更好地传达信息。动画效果广泛应用于电影、电视、广告、网页设计、游戏等领域，可以增强视觉体验和用户界面的交互性。常见的动画效果包括闪烁、平移、缩放、淡入淡出、旋转、颜色变化等。

🚀一、动画效果

🔎1.百叶窗

百叶窗动画效果是一种网页动画效果，模仿实际百叶窗的开合方式，通过快速旋转、伸缩等动画效果来模拟百叶窗的运动。在网页设计中应用广泛，可以用来优化用户体验、增强页面交互性，常用于图片轮播、菜单展开、页面切换等场景。

百叶窗动画效果主要依赖于CSS3的transform和transition属性来实现。通过将元素沿着X、Y轴方向旋转或伸缩，可以制作出不同方向和效果的百叶窗动画。同时，结合JavaScript或CSS动态添加类名等操作，可以控制动画触发和停止，实现更加灵活的效果展示。

一般而言，百叶窗动画效果需要考虑到动画的流畅性、过渡效果的自然性和操作的易用性，更好地提升用户的体验感。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    canvas{
      margin: 50px auto 0;
      display: block;
    }
  </style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
  此浏览器不支持canvas
</canvas>
</body>
</html>
<script>

  const ctx = document.getElementById('canvas')

  const gl = ctx.getContext('webgl')

  // 创建着色器源码
  const VERTEX_SHADER_SOURCE = `
    // 只传递顶点数据
    attribute vec4 aPosition;
    varying vec4 vPosition;

    void main() {
      vPosition = aPosition;

      gl_Position = aPosition; // vec4(0.0,0.0,0.0,1.0)
      gl_PointSize = 10.0;
    }
  `; // 顶点着色器

  const FRAGMENT_SHADER_SOURCE = `
    precision lowp float;
    uniform float uHeight;
    varying vec4 vPosition;
    uniform float list[5]; // 声明一个数组变量

    void main() {
      for(int i = 0; i < 5; i++) {
        if (vPosition.y > list[i + 1] && vPosition.y < list[i]) {
          if (vPosition.y > uHeight - float(i) * 0.5) {
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
          }
        }
      }
    }
  `; // 片元着色器

  const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)

  const aPosition = gl.getAttribLocation(program, 'aPosition');
  const uHeight = gl.getUniformLocation(program, 'uHeight');
  const uList = gl.getUniformLocation(program,'list');

  gl.uniform1fv(uList, [1.0, 0.5, 0.0, -0.5, -1.0]);
  const points = new Float32Array([
    -1.0, -1.0,
    1.0, -1.0,
    -1.0,  1.0,
    1.0,  1.0,
  ])

  const buffer = gl.createBuffer();

  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

  gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

  gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);

  gl.enableVertexAttribArray(aPosition)
  // gl.vertexAttrib2f(aPosition, 0.0, 0.0)

  let value = 1;
  function run() {
    value -= 0.01;

    gl.uniform1f(uHeight, value);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

    requestAnimationFrame(run)
  }
  run();
</script>

🔎2.淡入淡出

淡入淡出动画效果是指在图像或视频的过渡过程中，原始画面逐渐淡出，同时新的画面逐渐淡入，以达到平滑过渡的效果。通过淡入淡出的效果，可以增加画面的流畅感和美感，使视觉效果更加舒适。该效果通常应用于电影、电视节目和网页设计等领域。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    canvas{
      margin: 50px auto 0;
      display: block;
    }
  </style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
  此浏览器不支持canvas
</canvas>
</body>
</html>
<script>

  const ctx = document.getElementById('canvas')

  const gl = ctx.getContext('webgl')

  // 创建着色器源码
  const VERTEX_SHADER_SOURCE = `
    // 只传递顶点数据
    attribute vec4 aPosition;
    void main() {
      gl_Position = aPosition; // vec4(0.0,0.0,0.0,1.0)
      gl_PointSize = 10.0;
    }
  `; // 顶点着色器

  const FRAGMENT_SHADER_SOURCE = `
    precision lowp float;
    uniform float uOpacity;

    void main() {
      gl_FragColor = vec4(1.0,0.0,0.0,uOpacity);
    }
  `; // 片元着色器

  const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)

  const aPosition = gl.getAttribLocation(program, 'aPosition');
  const uOpacity = gl.getUniformLocation(program, 'uOpacity');

  const points = new Float32Array([
    -1.0, -1.0,
    1.0, -1.0,
    -1.0,  1.0,
    1.0,  1.0,
  ])

  const buffer = gl.createBuffer();

  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

  gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

  gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);

  gl.enableVertexAttribArray(aPosition)
  // gl.vertexAttrib2f(aPosition, 0.0, 0.0)

  let value = 0;
  function run() {
    value += 0.01;

    gl.uniform1f(uOpacity, value);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

    requestAnimationFrame(run)
  }
  run();
</script>

🔎3.卷入卷出

卷入卷出动画效果是一种过渡效果，通常用于网页设计或幻灯片演示。这种动画效果将一个元素从屏幕外部或隐藏的位置“滑动”到屏幕内或显示的位置，或将一个元素从屏幕内部或显示的位置“滑动”到屏幕外或隐藏的位置。这种过渡通常伴随着动画效果，如淡入淡出或缩放效果。卷入卷出动画效果可以使网页或幻灯片更加生动有趣，吸引观众的注意力。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    canvas{
      margin: 50px auto 0;
      display: block;
    }
  </style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
  此浏览器不支持canvas
</canvas>
</body>
</html>
<script>

  const ctx = document.getElementById('canvas')

  const gl = ctx.getContext('webgl')

  // 创建着色器源码
  const VERTEX_SHADER_SOURCE = `
    // 只传递顶点数据
    attribute vec4 aPosition;
    varying vec4 vPosition;

    void main() {
      vPosition = aPosition;

      gl_Position = aPosition; // vec4(0.0,0.0,0.0,1.0)
      gl_PointSize = 10.0;
    }
  `; // 顶点着色器

  const FRAGMENT_SHADER_SOURCE = `
    precision lowp float;
    uniform float uHeight;
    varying vec4 vPosition;

    void main() {
      // 向上卷 vPosition.y > uHeight   uHeight 的取值范围 -1.0 1.0
      // 向下卷 vPosition.y < uHeight   uHeight 的取值范围 -1.0 1.0
      // 向左卷 vPosition.x < uHeight   uHeight 的取值范围 -1.0 1.0
      // 向右卷 vPosition.x > uHeight   uHeight 的取值范围 -1.0 1.0
      // 左下-右上
      // vPosition.x > uHeight && vPosition.y > uHeight
      // uHeight 从 -1.0 到 1.0

      if (vPosition.y > uHeight) {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      } else {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 0.0);
      }
    }
  `; // 片元着色器

  const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)

  const aPosition = gl.getAttribLocation(program, 'aPosition');
  const uHeight = gl.getUniformLocation(program, 'uHeight');

  const points = new Float32Array([
    -1.0, -1.0,
    1.0, -1.0,
    -1.0,  1.0,
    1.0,  1.0,
  ])

  const buffer = gl.createBuffer();

  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

  gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

  gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);

  gl.enableVertexAttribArray(aPosition)
  // gl.vertexAttrib2f(aPosition, 0.0, 0.0)

  let value = -1;
  function run() {
    value += 0.01;

    gl.uniform1f(uHeight, value);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

    requestAnimationFrame(run)
  }
  run();
</script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-02-29，如有侵权请联系 cloudcommunity@tencent.com 删除

设计