js模拟实现烟花特效


Posted in Javascript onMarch 10, 2020

本文实例为大家分享了js实现烟花特效的具体代码,供大家参考,具体内容如下

如下图

js模拟实现烟花特效

首先描绘圆周运动

// d1
/*css*/
div{
 height: 4px;
 width: 4px;
 background: red;
 position: absolute;
}
//js
var div = document.getElementById('div'); // 画运动点
document.getElementsByTagName('body')[0].appendChild(tdiv); // 添加节点

var deg = 0; // 运动角度
var r = 100; // 半径
var center = [300, 300] // 圆心
var dd = Math.PI/180; // PI和角度之间的转换

setInterval(function(){
 deg++;
 div.style.left = center[0] + Math.cos(deg * dd) * r + 'px';
 div.style.top = center[1] + Math.sin(deg * dd) * r + 'px';
},16);

以上代码运行后可以看到一个圆周运动红色方块
完成上述步骤后,有什么用呢?
烟花的绽放,想象一下,可以当成很多方块从一个从圆心开始向四周扩算的一种运动方式。
一束烟花,有10个绽放点,那就是每隔360 / 10 = 36度,就有一条运动轨迹。
这样就好办了

// d2
var divs = []; // 保存烟花节点
var len = 10; // 烟花节点个数
var temp = 360 / len; // 运动轨迹所隔角度

for(var i = 0; i < len; i++){
 var tdiv = document.createElement('div');
 var tr1 = r; // 半径
 var deg = i * temp; // 当前轨迹所在的角度值

 var left = center[0] + Math.cos(deg * dd) * tr1
 var topLen = center[1] + Math.sin(deg * dd) * tr1
 tdiv.style.left = left +'px';
 tdiv.style.top = topLen +'px';

 tdiv.data = { // 存放节点的位置信息
 deg : deg,
 r : tr1,
 left : left,
 top : topLen
 };
 document.getElementsByTagName('body')[0].appendChild(tdiv);
 divs.push(tdiv);
}

上述代码运行后可以看到

js模拟实现烟花特效

看起来是有点烟花的意思了,但是烟花的运动轨迹可没这么工整,同一个地点出发,同一个地点结束。
而这个结束点就是半径的长度值,所以只需将半径进行变化就可打乱。

// d3
function getRanR(a,b){ // 随机得到a-b的值
 return Math.floor(Math.random()*(b-a+1)+a);
}

将for循环里的 tr1 改为 getRanR(0,200);
就可看到下图 

js模拟实现烟花特效

看着很乱,完全没点烟花的样子。没关系,让它运动起来就可以看出来了。
为了让这个动起来就要让上面 d2 的js代码进行修改。让各个节点的起始位置为圆心。同时为了省点力,用css3进行运动。

/*css*/
div{
 height: 4px;
 width: 4px;
 background: red;
 position: absolute;
 transition: 1s all; // 就添加这一句
}
// js
tdiv.style.left = center[0] +'px';
tdiv.style.top = center[1] +'px';

运动轨迹从 d2 可以看出来已经全部存放到了节点里。用divs可以拿到各个节点。所以只需操作divs就可以了

document.onclick = function () {
 for(var i = 0; i < divs.length; i++){
 divMove(divs[i])
 }
}
function divMove(div){
 var data = div.data;
 div.style.left = data.left + 'px';
 div.style.top = data.top + 'px';
}

运动如下图:

js模拟实现烟花特效

这样就可以看到一个简易的烟花效果。就这么一个简易的烟花连续起来就可达到图1的效果。
所以首先要对这个简易的烟花效果进行封装。
动画方面为了方便操作,所以引入jquery。
以下为html + css

<html>
<head>
 <meta charset="utf-8">
 <style>
 *{
 padding: 0;
 margin: 0;
 }
 div.boom-div{
 height: 4px;
 width: 4px;
 background: orange;
 position: absolute;
 border-radius: 50%;
 }
 #container{
 width: 100%;
 height: 100%;
 position: relative;
 }
 .input-container{
 position: absolute;
 z-index: 1;
 }
 </style>
</head>
<body>
 <div class="input-container">
 <input id="repaint" type="button" value="重绘">
 <input id="zero" type="button" value="清零">
 <input id="save" type="button" value="保存">
 </div>
 <div id="container"></div>
</body>
</html>

JS部分

var boom = {
 init: function (center, len, container, type) {
 this.len = len || 20; // 烟花节点个数
 this.maxR = 100; // 最大半径
 this.speed = 1500; // 速度
 this.divs = []; // 存放烟花节点
 this.center = center; // 圆心
 this.type = type; // 类型
 this.container = container; // 容器
 this.paint();
 },
 getRanR: function (a, b) { // 得到随机数
 return Math.floor(Math.random() * (b - a + 1 )+ a);
 },
 // 画出烟花节点所在点,以及保存去往点信息
 // 圆心, 半径, 容器, 类型
 paint: function () {
 var that = this;
 var center = that.center.slice(),
 len = that.len,
 container = that.container,
 type = that.type,
 dd = Math.PI / 180,
 temp = 360 / len;
 for (var i= 0; i < len; i++) {
 var div = document.createElement('div');
 var deg = i * temp; // 当前轨迹所在的角度值
 var cc = []; // 节点的结束点
 var tr = that.getRanR(0, that.maxR); // 半径
 var left = 0; // 烟花节点所在的位置
 var topLen = 0; // 烟花节点所在的位置
 var xCenter = center[0],
 yCenter = center[1];
 if (type) { // 当类型为真时,整个烟花效果就是向外扩张
 left = xCenter; // 为假时则是向内收缩,本质一样都是拿到开始点和结束点
 topLen = yCenter; // 只是将开始和结束换了个位置
 cc = [xCenter + Math.cos(deg * dd) * tr, yCenter + Math.sin(deg * dd) * tr];
 } else { 
 left = xCenter + Math.cos(deg * dd) * tr;
 topLen = yCenter + Math.sin(deg * dd) * tr;
 cc = [xCenter, yCenter];
 }
 div.className = 'boom-div';
 div.style.left = left + 'px';
 div.style.top = topLen + 'px';
 div.data = {
 left: cc[0], // 节点的结束点
 top: cc[1], // 节点的结束点
 }
 that.divs.push(div);
 container.appendChild(div);
 }
 // 使节点运动起来
 that.move();
 },
 // 运动
 move: function () {
 var that = this;
 var len = that.len,
 container = that.container,
 divLen = that.divs.length;
 for (var i = 0; i < divLen; i++) {
 var div = that.divs[i];
 $(div).animate({
 left: div.data.left,
 top: div.data.top,
 opacity: 0,
 }, that.speed, "linear", function() {
 // 运动完结后删除节点
 this.parentNode.removeChild(this);
 });
 } 
 }
}

控制特效

var container = $('#container')[0];
var arr = [];   // 存放鼠标点击位置
var iCount = -1;
$(container).on('mousedown', function(e) {
 iCount++;
 e = e || window.event;
 boom.init([e.clientX, e.clientY], 20,container, 1)
 arr[iCount] = [];  // 每点击一次,增加一个二位数组
 $(container).on('mousemove', function(e) {
 e = e || window.event;
 boom.init([e.clientX, e.clientY], 20, container, 1)
 arr[iCount].push([e.clientX, e.clientY]) // 鼠标每移动一次,添加鼠标位置
 })
 $(container).on('mouseup', function() {
 $(container).off('mousemove')
 })
});
// 重绘
$('#repaint').click(function() {
 // console.log(arr)
 if( !arr.length ){
 return;
 }
 var tempArr= [];
 // 将所有点取出来,转换为二维数组
 for(var i = 0; i < arr.length; i++){
 for(var j = 0; j< arr[i].length; j++){
 tempArr.push(arr[i][j])
 }
 }
 var count = 0;
 var timmer = setInterval(function(){
 if( ++ count >= tempArr.length){
 clearInterval(timmer)
 }
 boom.init(tempArr[count],20,container,1)
 },16)
});
$('#zero').click(function(){
 iCount=-1;
 arr=[]
});

烟花节点可以用背景图代替,比如用小爱心或者五角星啥的,只是大小得适当调整。

更多JavaScript精彩特效分享给大家:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
JavaScript 程序编码规范
Nov 23 Javascript
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
js实现不重复导入的方法
Mar 02 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
JS实现放烟花效果
Mar 10 #Javascript
JS实现烟花爆炸效果
Mar 10 #Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 #Javascript
JS实现网页烟花动画效果
Mar 10 #Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 #Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 #Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 #Javascript
You might like
thinkphp常见路径用法分析
2014/12/02 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
javascript 回调函数详解
2014/11/11 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
python中mechanize库的简单使用示例
2014/01/10 Python
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
21行Python代码实现拼写检查器
2016/01/25 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
Python中按值来获取指定的键
2019/03/04 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
程序员机试试题汇总
2012/03/07 面试题
学生打架检讨书1000字
2014/01/16 职场文书
质量月口号
2014/06/20 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
撤诉状格式范本
2015/05/19 职场文书
清明扫墓感想
2015/08/11 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
django学习之ajax post传参的2种格式实例
2021/05/14 Python
pandas数值排序的实现实例
2021/07/25 Python