今天我们将探索一些环境网页背景动画。这里的想法是创建一个有趣的动画集合，而不会（过于）分散注意力，并且可以很容易地应用于网页的背景。每个动画都是使用带有Canvas API的vanilla（es6 +）JavaScript创建的，而5个中的3个使用Jonas Wagner的Simplex Noise库。在文章的最后，提供了本文讲述的Demo的演示地址。

我在每个演示中使用了一些有用的技术来提高运行效率。

一个是屏幕外绘图或缓冲。我们的想法是拥有一个内存中的画布和上下文来处理所有复杂的绘图，以及一个用于在渲染循环中绘制每个新帧的屏幕画布。该技术还允许多次重新绘制相同的参考帧，这可以与滤波和合成技术组合以创建一些有趣的效果。

例：

function render() {

ctx.onscreen.drawImage(canvas.offscreen, 0, 0); // render offscreen canvas to onscreen

}

function draw() {

ctx.offscreen.fillStyle = 'hsla(220,50%,50%,1)';

ctx.offscreen.fillRect(0, 0, canvas.offscreen.width, canvas.offscreen.height); // fill offscreen canvas background

// draw objects to offscreen canvas here

render();

window.requestAnimationFrame(draw);

}

我使用的另一种技术是将所有复杂对象的属性降低为单个数组。

例如，假设我们想绘制一个粒子。2D粒子往往具有以下基本属性：

· 位置（x，y）

· 速度（x，y）

· 颜色

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

例：

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);

}

注意：其中一些技术非常具有实验性，并不适用于所有浏览器。

Demo＃1：极光（Aurora）

创建此效果的第一步是设置光线。基本思想是沿x轴随机放置它们并沿y轴居中，然后通过每个位置的单纯噪声场值进行偏移并绘制为梯度。

为了实现模糊效果，我最初将所有内容绘制到如上所述的屏幕外画布，然后我复制并模糊图像，然后在屏幕画布上渲染。

Demo＃2：漩涡（Swirl）

为了创建这种效果，我使用单纯形噪声库来确定动画中当前时间每个粒子位置的噪声值。然后我将该值乘以tau或2 * pi以得到弧度角。我将该值乘以噪声步数，在本例中为8，并将该最终值应用于粒子的速度。乘以许多步骤可以在粒子运动中创建"条带"外观。

为了实现发光效果，我使用与极光演示相同的模糊技术，然后我重新绘制没有模糊的参考（屏幕外）画布，并将框架与当前的屏幕画布合成。

Demo＃3：转变（Shift）

为此效果，我创建了许多大圆圈并将它们随机放置在屏幕上。我随机移动它们并使用当前位置和时间的噪声值更新它们的颜色值。然后我模糊并将参考框架绘制到屏幕画布上。

Demo＃4：合并（Coalesce）

此效果使用与旋转演示相同的技术来创建发光效果。

我想在这里做的是让每个粒子开始冲向中心，然后以螺旋形向中心陷入。要做到这一点，我将方向值存储在我的道具数组中，然后在我的更新循环中，我将它们的方向插入直接指向中心，指向略微偏离中心的位置，同时减慢沿途的速度。

为了使方块始终朝向相同的方向，我使用.translate（）和.rotate（）函数来旋转每个粒子。

Demo＃5：管道（Pipeline）

虽然它们看起来像管道，但它也是一个粒子动画。每个粒子仅绘制为具有笔划，无填充和低不透明度的圆。它们缓慢移动，每个前一帧都保留在屏幕上，这样就形成了管道的外观。

对于管道转弯，我设置了可能转弯数的初始计数，此动画为8。我得到一个转弯的弧度值，并随机决定每个管道何时允许转弯，并决定转弯是负还是正。

本文示例演示网址：