用canvas画一个炫酷的粒子动画倒计时

前言

😆 这是一篇踩在活动尾声的文章，主要是之前在摸鱼社群里有人发了个粒子动画的特效视频，想着研究研究写一篇文章出来看看，结果这一下子就研究了半个多月。

😂 下面就把研究成果通过文字的形式展现出来吧！！文末有码上掘金可以看效果的哦！！

canvas 粒子动画介绍

何为canvas？

canvas是HTML5中新增的一个标签，主要是用于网页实时生成图像并可操作图像，它是用JavaScript操作的bitmap。

粒子动画是啥？

粒子动画就是页面上通过发射许多微小粒子来表示不规则模糊物体，比如：用小圆点来模拟下雪、下雨的效果，用模糊线条模拟黑客帝国背景效果等。

canvas

🤨 新建一个HTML文件，写入canvas标签用于后续展示倒计时

<canvas id="canvas-number"></canvas>
<canvas id="canvas-dots"></canvas> 

• canvas-number 是用于倒计时数字展示
• canvas-dots 是用于全屏粒子动画展示

🤨 加点样式效果看看吧

body {background-color: #24282f;margin: 0;padding: 0;
}canvas {position: absolute;top: 0;left: 0;
}#canvas-number {width: 680px;height: 420px;
} 

• 主要是定义了 canvas-number 画布大小，canvas-dots 画布大小会在JavaScript中定义

定义初始变量

🤨 在JavaScript中定义所需的变量

var numberStage,numberStageCtx,numberStageWidth = 680,numberStageHeight = 420,numberOffsetX,numberOffsetY,stage,stageCtx,stageWidth = window.innerWidth,stageHeight = window.innerHeight,stageCenterX = stageWidth / 2,stageCenterY = stageHeight / 2,countdownFrom = 3,countdownTimer = 2800,countdownRunning = true,number,dots = [],numberPixelCoordinates,circleRadius = 2,colors = ['61, 207, 236', '255, 244, 174', '255, 211, 218', '151, 211, 226']; 

• numberStage - stageCenterY 这一块主要是定义画布宽高和坐标
• countdownFrom 从 10 开始倒计时
• countdownTimer 数字显示的时长
• countdownRunning 动起来
• colors 页面上所有粒子颜色
• 其他的可以自己理解一下哦~

初始化canvas和数字文本

😏 创建一个init函数，里面会包裹初始化内容

function init() {// 初始化canvas-numbernumberStage = document.getElementById("canvas-number");numberStageCtx = numberStage.getContext('2d');// 设置文字文本的窗口大小numberStage.width = numberStageWidth;numberStage.height = numberStageHeight;// 初始化canvas-dots和窗口大小stage = document.getElementById("canvas-dots");stageCtx = stage.getContext('2d');stage.width = stageWidth;stage.height = stageHeight;// 设置一定的偏移量，让文字居中numberOffsetX = (stageWidth - numberStageWidth) / 2;numberOffsetY = (stageHeight - numberStageHeight) / 2;
} 

• 根据代码中的注释可以了解初始化的内容哦~

😏 初始化完成之后，我们需要直接运行方法

init(); 

• 在init函数结束之后，马上就需要运行该函数了

创建一定数量的点

for (var i = 0; i < 2240; i++) {var dot = new Dot(randomNumber(0, stageWidth), randomNumber(0, stageHeight), colors[randomNumber(1, colors.length)], .3);dots.push(dot);tweenDots(dot, '', 'space');
} 

• 循环创建点，这里循环给的是个固定数据
• new Dot 是创建点对象的方法
• tweenDots 是让点动起来的第三方js

function Dot(x, y, color, alpha) {var _this = this;_this.x = x;_this.y = y;_this.color = color;_this.alpha = alpha;this.draw = function () {stageCtx.beginPath();stageCtx.arc(_this.x, _this.y, circleRadius, 0, 2 * Math.PI, false);stageCtx.fillStyle = 'rgba(' + _this.color + ', ' + _this.alpha + ')';stageCtx.fill();}} 

• 通过 x、y坐标定位点
• 通过随机颜色，让点样式更丰富
• draw 里面的内容都是canvas画图的方法，具体可参考canvas文档

倒计时

function countdown() {// 发送倒计时数字drawNumber(countdownFrom.toString());// 倒计时为 0 时停止if (countdownFrom === 0) {countdownRunning = false;drawNumber('蜡笔小心');}countdownFrom--;
} 

• 倒计时结束之后，就可以想干啥干啥了，这里我重新输出了额外的文字
• countdownFrom 需要做递减的操作

countdown(); 

• 我们需要在页面进入时，直接触发倒计时函数

倒计时文本绘画

😔 每一个倒计时都需要用不同的点去绘制

😔 这里通过循环 让每个文本都有四种颜色绘制

function drawNumber(num) {numberStageCtx.clearRect(0, 0, numberStageWidth, numberStageHeight);numberStageCtx.fillStyle = "#24282f";numberStageCtx.textAlign = 'center';numberStageCtx.font = "bold 118px Lato";numberStageCtx.fillText(num, 250, 300);var ctx = document.getElementById('canvas-number').getContext('2d');var imageData = ctx.getImageData(0, 0, numberStageWidth, numberStageHeight).data;numberPixelCoordinates = [];for (var i = imageData.length; i >= 0; i -= 4) {if (imageData[i] !== 0) {var x = (i / 4) % numberStageWidth;var y = Math.floor(Math.floor(i / numberStageWidth) / 4);if ((x && x % (circleRadius * 2 + 3) == 0) && (y && y % (circleRadius * 2 + 3) == 0)) {numberPixelCoordinates.push({x: x,y: y});}}}formNumber();
}function formNumber() {for (var i = 0; i < numberPixelCoordinates.length; i++) {tweenDots(dots[i], numberPixelCoordinates[i], '');}if (countdownRunning && countdownFrom > 0) {setTimeout(function () {breakNumber();}, countdownTimer);}
}function breakNumber() {for (var i = 0; i < numberPixelCoordinates.length; i++) {tweenDots(dots[i], '', 'space');}if (countdownRunning) {setTimeout(function () {countdown();}, countdownTimer);}} 

循环绘制

function loop() {stageCtx.clearRect(0, 0, stageWidth, stageHeight);for (var i = 0; i < dots.length; i++) {dots[i].draw(stageCtx);}requestAnimationFrame(loop);
}
loop(); 

• 循环绘制，需要进入页面即执行，所以在方法之后马上执行该函数

点动画

🤯 在倒计时文本中，我们一直会调用tweenDots方法，就是用于点动画效果的绘制

function tweenDots(dot, pos, type) {if (type === 'space') {TweenMax.to(dot, (3 + Math.round(Math.random() * 100) / 100), {x: randomNumber(0, stageWidth),y: randomNumber(0, stageHeight),alpha: 0.3,ease: Cubic.easeInOut,onComplete: function () {tweenDots(dot, '', 'space');}});} else {TweenMax.to(dot, (1.5 + Math.round(Math.random() * 100) / 100), {x: (pos.x + numberOffsetX),y: (pos.y + numberOffsetY),delay: 0,alpha: 1,ease: Cubic.easeInOut,onComplete: function () {}});}
}function randomNumber(min, max) {return Math.floor(Math.random() * (max - min) + min);
} 

• 随机移动画布周围的点
• 让点和文本内容协调展示

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享