HTML5 Canvas炫酷背景动画特效

HamiltonMarguerite 发布于1年前
0 条问题

对于复杂的背景动画,需要建立很多对象属性,我们可以将所有复杂的对象属性降低为单个数组形式。例如,假设我们想绘制一个2D粒子,往往具有以下基本属性:

  • 位置:position (x, y)
  • 速度:velocity (x, y)
  • 颜色:color

我们可以将它们存储在单个类型的数组中,而不是将这些值存储为对象属性,从而无需创建大量复杂的粒子对象。

例如:

const particleCount = 200;
  const propCount = 5; // x, y, vx, vy, hue (hsla color)
  const propsLength = particleCount * propCount; // length of the props array  

  let props;

  function createParticles() {
    props = new Float32Array(propCount);

    // iterate for the length of the props array
    // increment by the number of props per particle
    for (let i = 0; i < propsLength; i += propCount) { 
      createParticle(i);
    }
  }
  
  function createParticle(i) {
    let x, y, vx, vy, hue;

    // initialize values here, can randomize, use simplex noise or anything really :)

    props.set([x, y, vx, vy, hue], i);
  }

DEMO1

Demo1使用与旋转演示相同的技术来创建发光效果。为了使方块始终朝向相同的方向,使用了 .translate() 和 .rotate() 函数来旋转每个粒子。

HTML5 Canvas炫酷背景动画特效

DEMO2

Demo2使用了模糊效果制作出了漩涡旋转发光效果。

HTML5 Canvas炫酷背景动画特效

查看原文: HTML5 Canvas炫酷背景动画特效

  • goldenlion
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。