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 相关文章推荐
基于jQuery的js分页代码
Jun 10 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
jQuery链使用指南
Jan 20 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 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生成静态页
2006/11/25 PHP
php读取xml实例代码
2010/01/28 PHP
php代码书写习惯优化小结
2013/06/20 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python实现求两个csv文件交集的方法
2017/09/06 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
村委会贫困证明范文
2014/09/21 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
农村党员干部承诺书
2015/05/04 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
分享几个简单MySQL优化小妙招
2022/03/31 MySQL
教你如何用cmd快速登录服务器
2022/06/10 Servers
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL