Animation 如何建立我有趣的时间表？

建立我的响应性网站，我想建立我有趣的时间表，但我不能想出一个解决方案

它可能是一个精灵，如火箭或飞碟，从页面中间底部起飞，冒出烟雾

烟雾会或多或少地留下，并透露我的时间表

---

有人知道如何做到这一点吗？

要模拟烟雾，必须使用粒子系统。 您可能知道，WebGL能够绘制三角形、直线和点。 最后一个是我们需要的。烟雾是由数百个大小略有不同的半透明白色圆盘构成的。每个点由7个属性定义：

x、 y:起始位置。 方向。 半径：最大半径。 寿命：消失前的毫秒数。 延迟：在其生成之前等待的毫秒数。 一个技巧是沿垂直中心轴创建点。你越往上爬，延迟就越大。另一个诀窍是，当该点到达live末尾时，使其更加透明

以下是创建此类顶点的方法：

function createVertices() {
  var x, y, vx, vy, radius, life, delay;
  var vertices = [];
  for( delay=0; delay<1; delay+=0.01 ) {
    for( var loops=0; loops<5; loops++ ) {
      // Going left.
      x = rnd(0.01);
      y = (2.2 * delay - 1) + rnd(-0.01, 0.01);
      vx = -rnd(0, 1.5) * 0.0001;
      vy = -rnd(0.001);
      radius = rnd(0.1, 0.25) / 1000;
      life = rnd(2000, 5000);
      vertices.push( x, y, vx, vy, radius, life, delay );
      // Going right.
      x = -rnd(0.01);
      y = (2.2 * delay - 1) + rnd(-0.01, 0.01);
      vx = rnd(0, 1.5) * 0.0001;
      vy = -rnd(0.001);
      radius = rnd(0.1, 0.25) / 1000;
      life = rnd(2000, 5000);
      vertices.push( x, y, vx, vy, radius, life, delay );
    }
  }

  var buff = gl.createBuffer();  
  gl.bindBuffer( gl.ARRAY_BUFFER, buff );
  gl.bufferData( gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW );

  return Math.floor( vertices.length / 7 );
}

---

下面是一个活生生的例子：

在后台工作完成之前，烟雾是否应该隐藏整个屏幕？不，不是整个屏幕。这应该是一个灯光效果。你能给我们一个你将在屏幕上看到什么的草图吗？我添加了一张图片，我正在寻找一个简单的效果。

uniform float uniWidth;
uniform float uniHeight;
uniform float uniTime;

attribute vec2 attCoords;
attribute vec2 attDirection;
attribute float attRadius;
attribute float attLife;
attribute float attDelay;

varying float varAlpha;

const float PERIOD = 10000.0;
const float TRAVEL_TIME = 2000.0;

void main() {
  float time = mod( uniTime, PERIOD );
  time -= TRAVEL_TIME * attDelay;
  if( time < 0.0 || time > attLife) return;
  vec2 pos = attCoords + time * attDirection;
  gl_Position = vec4( pos.xy, 0, 1 );
  gl_PointSize = time * attRadius * min(uniWidth, uniHeight);
  varAlpha = 1.0 - (time / attLife);
}

precision mediump float;
varying float varAlpha;

void main() {
  float x = gl_PointCoord.x - 0.5;
  float y = gl_PointCoord.y - 0.5;
  float radius = x * x + y * y;
  if( radius > 0.25 ) discard;

  float alpha = varAlpha * 0.8 * (0.25 - radius);
  gl_FragColor = vec4(1, 1, 1, alpha);
}