使用HTML5 Canvas创建流体动感Loading动画教程 | 高级前端动画实现指南

简介

本文将介绍如何使用HTML5 Canvas技术创建一个具有液体流动效果的Loading加载动画。这个动画结合了粒子效果和发光效果，创造出独特的视觉体验。

效果展示

实现原理

动画主要通过以下技术实现：

• Canvas 2D绘图上下文
• SVG滤镜实现粒子化效果
• JavaScript控制动画帧
• 数学函数计算粒子运动轨迹

代码实现

1. HTML结构

htmlCopy<canvas id='canvas'></canvas>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="shadowed-goo">
             <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
             <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
             <feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
             <feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 -0.2" result="shadow" />
             <feOffset in="shadow" dx="1" dy="1" result="shadow" />
             <feBlend in2="shadow" in="goo" result="goo" />
             <feBlend in2="goo" in="SourceGraphic" result="mix" />
        </filter>
        <filter id="goo">
             <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
             <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
             <feBlend in2="goo" in="SourceGraphic" result="mix" />
        </filter>
    </defs>
</svg>

2. CSS样式

cssCopy#canvas {
    margin: 0px auto;
    display: block;
    filter: url("#shadowed-goo");
}

3. JavaScript实现

javascriptCopyvar canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var p = [];
var particle = [];
var angle = Math.PI/4;
canvas.width = 600;
canvas.height = 600;
var width = canvas.width;
var height = canvas.height;

function getRandomInt(min, max) {
    return min + Math.floor(Math.random() * (max - min + 1));
}

function retinaReady() {
    var pixelRatio = window.devicePixelRatio || 1;
    var backingStore = ctx.webkitBackingStorePixelRatio || 1;
    window.ratio = pixelRatio / backingStore;
    if (pixelRatio !== backingStore) {
        var oldWidth = canvas.width;
        var oldHeight = canvas.height;
        canvas.width = oldWidth * ratio;
        canvas.height = oldHeight * ratio;
        canvas.style.width = oldWidth + "px";
        canvas.style.height = oldHeight + "px";
        ctx.scale(window.ratio, window.ratio);
    }
}

function run(a) {
    var r = 140;
    var x = r * Math.sin(a) + width / 2;
    var y = r * Math.cos(a) + ((height / 2)-80);
    var p = new Particle(x, y);
    particle.push(p);
}

function Particle(x, y) {
    this.x = x;
    this.y = y;
    this.r = getRandomInt(10, 16);
    this.v = {x: 0, y: 0};
    this.a = {x: 0, y: 0};
    this.al = 1;
}

Particle.prototype.update = function() {
    this.a.x = getRandomInt(-0.001, 0.001);
    this.a.y = getRandomInt(0.01, 0.02);
    this.v.x += this.a.x;
    this.v.y += this.a.y;
    this.x += this.v.x;
    this.y += this.v.y;

    if (this.r >= 0.01) {
        this.r -= 0.2;
        this.al -= 0.001;
    } else {
        this.r = 0;
        this.al = 0;
    }
};

Particle.prototype.draw = function() {
    ctx.fillStyle = "rgba(255,255,255," + this.al + ")";
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
    ctx.fill();
};

function animate() {
    ctx.clearRect(0, 0, width, height);
    run(angle);
    requestAnimationFrame(animate);
    for (var j = 0; j < particle.length; j++) {
        var p = particle[j];
        p.update();
        p.draw();
    }

    if (angle <= 2 * Math.PI) {
        angle += 0.04;
    } else {
        angle = 0;
    }
}

retinaReady();
animate();

技术要点

1. SVG滤镜通过feGaussianBlur和feColorMatrix实现粒子化效果
2. Canvas通过arc()方法绘制圆形粒子
3. 使用requestAnimationFrame实现流畅动画
4. 通过数学计算控制粒子的运动轨迹和速度

相关链接

• Canvas API中文文档
• SVG滤镜中文教程
• requestAnimationFrame中文指南