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 相关文章推荐
Javascript 判断函数类型完美解决方案
Sep 02 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 Javascript
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
php 日期时间处理函数小结
2009/12/18 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
python过滤字符串中不属于指定集合中字符的类实例
2015/06/30 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
C++面试题:关于链表和指针
2013/06/05 面试题
名词解释型面试题(主要是网络)
2013/12/27 面试题
青春寄语大全
2014/04/09 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
英文慰问信
2015/02/14 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
心灵捕手观后感
2015/06/02 职场文书
超市店长竞聘书
2015/09/15 职场文书
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
Redis Stream类型的使用详解
2021/11/11 Redis