js模擬實現煙花特效
阿新 • • 發佈：2020-03-11
本文例項為大家分享了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);
}上述程式碼執行後可以看到
看起來是有點菸花的意思了，但是煙花的運動軌跡可沒這麼工整，同一個地點出發，同一個地點結束。
而這個結束點就是半徑的長度值，所以只需將半徑進行變化就可打亂。
// d3
function getRanR(a,b){ // 隨機得到a-b的值
return Math.floor(Math.random()*(b-a+1)+a);
}
將for迴圈裡的 tr1 改為 getRanR(0,200);
就可看到下圖
看著很亂，完全沒點菸花的樣子。沒關係，讓它運動起來就可以看出來了。
為了讓這個動起來就要讓上面 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';
}
運動如下圖：
這樣就可以看到一個簡易的煙花效果。就這麼一個簡易的煙花連續起來就可達到圖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,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,1)
arr[iCount] = []; // 每點選一次，增加一個二位陣列
$(container).on('mousemove',function(e) {
e = e || window.event;
boom.init([e.clientX,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],1)
},16)
});
$('#zero').click(function(){
iCount=-1;
arr=[]
});
煙花節點可以用背景圖代替，比如用小愛心或者五角星啥的，只是大小得適當調整。
更多JavaScript精彩特效分享給大家：
Javascript選單特效大全
javascript仿QQ特效彙總
JavaScript時鐘特效彙總
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。