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 相关文章推荐
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
解决Layui 表格自适应高度的问题
Nov 15 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对二维数组按指定键值key排序示例代码
2013/11/26 PHP
php根据年月获取季度的方法
2014/03/31 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
python处理圆角图片、圆形图片的例子
2014/04/25 Python
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
python求绝对值的三种方法小结
2019/12/04 Python
python3让print输出不换行的方法
2020/08/24 Python
详解python tkinter 图片插入问题
2020/09/03 Python
python时间time模块处理大全
2020/10/25 Python
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
2014年设备管理工作总结
2014/11/26 职场文书
自荐信模板大全
2015/03/27 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python
python opencv旋转图片的使用方法
2021/06/04 Python