JavaScript 实现烟花绽放动画效果详解
本文详细介绍如何使用 JavaScript 结合 DOM 元素与 Canvas 技术实现炫酷的烟花绽放效果。通过封装随机数、颜色生成及运动函数，模拟大烟花升空后爆炸分裂为多个小烟花的物理过程，包含完整的样式设置与事件监听逻辑，适合前端初学者参考学习。
JavaScript 实现烟花动画效果详解
本文分享了一段使用 JavaScript 实现炫酷烟花视觉效果的具体代码示例，供读者参考与学习。
在开始编码之前，需要梳理清楚整个动画流程的逻辑结构。
首先，需要创建一个画布区域来承载烟花的展示效果。接着思考烟花燃放的具体步骤：通常情况下，烟花会先有一个主体升空，随后在空中分散成多个小型烟花，且每个小烟花拥有不同的视觉样式和运动轨迹。
整体实现思路如下：先构建一个代表大烟花的 DOM 元素，当该元素运动至用户鼠标点击的位置时，大烟花元素消失，随即在该位置生成多个小烟花，且这些小烟花的运动轨迹和样式各不相同。
创建画布与获取节点
第一步，创建一个用于展示烟花效果的画布容器（div）。
/*给画布设置css样式 */
#container {
width: 80%;
height: 600px;
border: 1px red solid;
position: relative;
margin: 20px auto;
cursor: pointer;
background: black;
}
<!-- 设置一个div -->
<div id="container"></div>第二步，获取页面中的相关节点元素。
//获取节点
var app = document.getElementById('container');
//给app设置一个绑定事件
app.onclick = function(event) {
var e = event || window.event
//获得鼠标点击的位置的坐标
var pos = {
cy: e.offsetY,
cx: e.offsetX
}
new Fire(app, pos)
}烟花效果的核心实现过程为：首先让一个大尺寸的 div 元素运动至鼠标点击坐标，随后在该位置散开，分裂为多个较小的 div 元素。
大烟花运动逻辑实现
第三步，先实现大烟花的运动效果，这需要调用随机数生成方法、随机颜色生成方法以及自定义的运动函数。
// 构造函数
function Fire(app, pos) {
//把属性设置成变量
this.app = app;
this.pos = pos;
//创建一个大的div
this.bf = document.createElement('div');
//设置一个类名
this.bf.className = 'fire';
//设置样式
this.bf.style.left = this.pos.cx + 'px';
this.bf.style.background = this.getColor();
this.app.appendChild(this.bf);
//调用运动函数
this.move(this.bf, {
top: this.pos.cy
}, () => {
this.bf.remove();
this.smallFire();
})
}3.1 首先，设置大烟花（fire）的基础 CSS 样式。
以下是大烟花的初始样式定义。
.fire {
background: red;
position: absolute;
/* 设置bottom时,top获取为最大值,减去鼠标点击位置 */
bottom: 0px;
width: 6px;
height: 6px;
}3.2 在原型对象上设置生成随机数和随机颜色的辅助方法。
//获得一个随机数方法
Fire.prototype.rand = function(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
//获得一个随机颜色的方法
Fire.prototype.getColor = function() {
let sum = '#';
for (let i = 0; i < 6; i++) {
sum += this.rand(0, 15).toString(16)
}
return sum;
}3.3 在原型对象上封装一个通用的运动函数。
Fire.prototype.move = function(ele, target, cb) {
// clearInterval(times);
let times = setInterval(function() {
// console.log(this);
var onOff = true;
// 遍历运动的方向和目标
for (let attr in target) {
// attr 表示运动的属性
// console.log(attr);
// 获取元素属性的实时值
let tmpVal = parseInt(this.getPos(ele, attr))
// 计算speed
// console.log(tmpVal, attr);
let speed = (target[attr] - tmpVal) / 10;
// 取整
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// 停止计时器,当一个属性运动到位置,设置开关状态
if (tmpVal == target[attr]) onOff = true;
// 让元素动起来
ele.style[attr] = tmpVal + speed + 'px';
}
// 判断开关状态,清除定时器
for (var moveAttr in target) {
// 如果不相等,就说明有属性没有运动到位置,定时器不能停止
if (target[moveAttr] !== parseInt(this.getPos(ele, moveAttr))) {
onOff = false;
break;
}
}
if (onOff) {
clearInterval(times);
cb && cb();
}
// console.log(1111);
}.bind(this), 30)
}
// 获取元素的实时位置的函数
Fire.prototype.getPos = function(obj, attr) {
if (obj.currentStyle) { // 获取css的样式
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj)[attr]
}
}通过上述步骤，即可实现大烟花的运动轨迹。当大烟花运动到指定坐标后消失，并从消失点生成多个小烟花。基于前文分析，小烟花的运动轨迹和样式各不相同，接下来将介绍小烟花的具体实现方法。
小烟花效果实现
第四步，实现小烟花的效果。
4.1 设置小烟花（small-fire）的 CSS 样式。
以下是小烟花的初始属性定义。
.small-fire {
width: 10px;
height: 10px;
position: absolute;
border-radius: 50%;
}4.2 设置小烟花的具体属性与行为逻辑。
//小烟花
Fire.prototype.smallFire = function() {
//首先我们设置小烟花的数量
let num = this.rand(50, 60)
//遍历 给每一个小烟花设置不同的样式
for (let i = 0; i < num; i++) {
let sf = document.createElement('div');
sf.className = 'small-fire';
sf.style.left = this.pos.cx + 'px';
sf.style.top = this.pos.cy + 'px';
sf.style.background = this.getColor();
//console.log(sf);
//追加到页面中
this.app.appendChild(sf);
//使小烟花的运动轨迹成圆周运动
//var top = parseInt(Math.sin(Math.PI / 180 * 360 / num * i) * r) + this.pos.cy;
//var left = parseInt(Math.cos(Math.PI / 180 * 360 / num * i) * r) + this.pos.cx;
//给小烟花一个随机的位置，可以是在画布里面的任意一个位置
let top = this.rand(0, this.app.offsetHeight - sf.offsetHeight);
let left = this.rand(0, this.app.offsetWidth - sf.offsetWidth);
//调用运动函数
this.move(sf, {
top: top,
left: left
}, function() {
sf.remove();
})
}
}以上即为本文的全部内容，希望对读者的学习有所帮助，也欢迎大家继续支持本站。
D3.js 处理大规模数据点的性能优化策略
2026-11-05 15:37:25
JS实现网页摄像头实时扫码：结合getUserMedia与jsQR教程
2026-11-05 15:27:28
D3.js v5 迁移到 v7 的 API 变更与注意事项
2026-11-05 11:57:17
使用 animate.js 实现多元素协同的序列动画
2026-11-04 22:27:53
JS拖拽排序时怎么添加平滑动画效果？FLIP技术实战
2026-11-04 10:12:22