js模擬實(shí)現(xiàn)煙花特效
更新時(shí)間：2020年03月10日 14:44:14 作者：NEOS55555
這篇文章主要為大家詳細(xì)介紹了js模擬實(shí)現(xiàn)煙花特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)煙花特效的具體代碼，供大家參考，具體內(nèi)容如下
如下圖
首先描繪圓周運(yùn)動(dòng)
// d1
/*css*/
div{
height: 4px;
width: 4px;
background: red;
position: absolute;
}
//js
var div = document.getElementById('div'); // 畫運(yùn)動(dòng)點(diǎn)
document.getElementsByTagName('body')[0].appendChild(tdiv); // 添加節(jié)點(diǎn)
var deg = 0; // 運(yùn)動(dòng)角度
var r = 100; // 半徑
var center = [300, 300] // 圓心
var dd = Math.PI/180; // PI和角度之間的轉(zhuǎn)換
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);
以上代碼運(yùn)行后可以看到一個(gè)圓周運(yùn)動(dòng)紅色方塊
完成上述步驟后，有什么用呢？
煙花的綻放，想象一下，可以當(dāng)成很多方塊從一個(gè)從圓心開始向四周擴(kuò)算的一種運(yùn)動(dòng)方式。
一束煙花，有10個(gè)綻放點(diǎn)，那就是每隔360 / 10 = 36度，就有一條運(yùn)動(dòng)軌跡。
這樣就好辦了
// d2
var divs = []; // 保存煙花節(jié)點(diǎn)
var len = 10; // 煙花節(jié)點(diǎn)個(gè)數(shù)
var temp = 360 / len; // 運(yùn)動(dòng)軌跡所隔角度
for(var i = 0; i < len; i++){
var tdiv = document.createElement('div');
var tr1 = r; // 半徑
var deg = i * temp; // 當(dāng)前軌跡所在的角度值
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 = { // 存放節(jié)點(diǎn)的位置信息
deg : deg,
r : tr1,
left : left,
top : topLen
};
document.getElementsByTagName('body')[0].appendChild(tdiv);
divs.push(tdiv);
}
上述代碼運(yùn)行后可以看到
看起來是有點(diǎn)煙花的意思了，但是煙花的運(yùn)動(dòng)軌跡可沒這么工整，同一個(gè)地點(diǎn)出發(fā)，同一個(gè)地點(diǎn)結(jié)束。
而這個(gè)結(jié)束點(diǎn)就是半徑的長(zhǎng)度值，所以只需將半徑進(jìn)行變化就可打亂。
// d3
function getRanR(a,b){ // 隨機(jī)得到a-b的值
return Math.floor(Math.random()*(b-a+1)+a);
}
將for循環(huán)里的 tr1 改為 getRanR(0,200);
就可看到下圖
看著很亂，完全沒點(diǎn)煙花的樣子。沒關(guān)系，讓它運(yùn)動(dòng)起來就可以看出來了。
為了讓這個(gè)動(dòng)起來就要讓上面 d2 的js代碼進(jìn)行修改。讓各個(gè)節(jié)點(diǎn)的起始位置為圓心。同時(shí)為了省點(diǎn)力，用css3進(jìn)行運(yùn)動(dòng)。
/*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';
運(yùn)動(dòng)軌跡從 d2 可以看出來已經(jīng)全部存放到了節(jié)點(diǎn)里。用divs可以拿到各個(gè)節(jié)點(diǎn)。所以只需操作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';
}
運(yùn)動(dòng)如下圖：
這樣就可以看到一個(gè)簡(jiǎn)易的煙花效果。就這么一個(gè)簡(jiǎn)易的煙花連續(xù)起來就可達(dá)到圖1的效果。
所以首先要對(duì)這個(gè)簡(jiǎn)易的煙花效果進(jìn)行封裝。
動(dòng)畫方面為了方便操作，所以引入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; // 煙花節(jié)點(diǎn)個(gè)數(shù)
this.maxR = 100; // 最大半徑
this.speed = 1500; // 速度
this.divs = []; // 存放煙花節(jié)點(diǎn)
this.center = center; // 圓心
this.type = type; // 類型
this.container = container; // 容器
this.paint();
},
getRanR: function (a, b) { // 得到隨機(jī)數(shù)
return Math.floor(Math.random() * (b - a + 1 )+ a);
},
// 畫出煙花節(jié)點(diǎn)所在點(diǎn)，以及保存去往點(diǎn)信息
// 圓心， 半徑， 容器， 類型
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; // 當(dāng)前軌跡所在的角度值
var cc = []; // 節(jié)點(diǎn)的結(jié)束點(diǎn)
var tr = that.getRanR(0, that.maxR); // 半徑
var left = 0; // 煙花節(jié)點(diǎn)所在的位置
var topLen = 0; // 煙花節(jié)點(diǎn)所在的位置
var xCenter = center[0],
yCenter = center[1];
if (type) { // 當(dāng)類型為真時(shí)，整個(gè)煙花效果就是向外擴(kuò)張
left = xCenter; // 為假時(shí)則是向內(nèi)收縮，本質(zhì)一樣都是拿到開始點(diǎn)和結(jié)束點(diǎn)
topLen = yCenter; // 只是將開始和結(jié)束換了個(gè)位置
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], // 節(jié)點(diǎn)的結(jié)束點(diǎn)
top: cc[1], // 節(jié)點(diǎn)的結(jié)束點(diǎn)
}
that.divs.push(div);
container.appendChild(div);
}
// 使節(jié)點(diǎn)運(yùn)動(dòng)起來
that.move();
},
// 運(yùn)動(dòng)
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() {
// 運(yùn)動(dòng)完結(jié)后刪除節(jié)點(diǎn)
this.parentNode.removeChild(this);
});
}
}
}
控制特效
var container = $('#container')[0];
var arr = []; // 存放鼠標(biāo)點(diǎn)擊位置
var iCount = -1;
$(container).on('mousedown', function(e) {
iCount++;
e = e || window.event;
boom.init([e.clientX, e.clientY], 20,container, 1)
arr[iCount] = []; // 每點(diǎn)擊一次，增加一個(gè)二位數(shù)組
$(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]) // 鼠標(biāo)每移動(dòng)一次，添加鼠標(biāo)位置
})
$(container).on('mouseup', function() {
$(container).off('mousemove')
})
});
// 重繪
$('#repaint').click(function() {
// console.log(arr)
if( !arr.length ){
return;
}
var tempArr= [];
// 將所有點(diǎn)取出來，轉(zhuǎn)換為二維數(shù)組
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=[]
});
煙花節(jié)點(diǎn)可以用背景圖代替，比如用小愛心或者五角星啥的，只是大小得適當(dāng)調(diào)整。
更多JavaScript精彩特效分享給大家：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
只需一行代碼,輕松實(shí)現(xiàn)一個(gè)在線編輯器
在瀏覽器地址欄中輸入一行代碼：data:text/html, <html contenteditable> ，回車即可把瀏覽器變臨時(shí)編輯器（需要瀏覽器支持 HTML5 屬性 contenteditable）2013-11-11
這篇文章主要給大家介紹了關(guān)于如何讓微信小程序頁面之間的通信不再變困難的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
多附件上傳組件演示...2006-09-09
javascript設(shè)計(jì)模式之module(模塊)模式
這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計(jì)模式之module(模塊)模式 ，感興趣的小伙伴們可以參考一下2016-08-08
javascript 面向?qū)ο骹unction詳解及實(shí)例代碼
這篇文章主要介紹了javascript 面向?qū)ο骹unction詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-02-02
今天咱們就來聊聊KeyCode被棄用后的問題,希望對(duì)大家有所啟發(fā),如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
echarts使用中關(guān)于y坐標(biāo)軸無法正常顯示的問題解決記錄
Echarts是由百度提供的數(shù)據(jù)可視化解決方案,下面這篇文章主要給大家介紹了關(guān)于echarts使用中關(guān)于y坐標(biāo)軸無法正常顯示的問題解決記錄,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
下面小編就為大家?guī)硪黄狫avaScript事件方法(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
本文結(jié)合前面發(fā)布的文章，詳細(xì)介紹了javascript的函數(shù)語法，非常的詳盡，非常的實(shí)用，這里推薦給大家，是篇不可多得的文章2021-09-09
javascript 構(gòu)建模塊化開發(fā)過程解析
這篇文章主要介紹了javascript 構(gòu)建模塊化開發(fā)過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09