這篇文章將為大家詳細講解有關原生JS怎么實現(xiàn)爆炸的動態(tài)效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
通過原生js代碼，實現(xiàn)粒子爆炸效果組件
組件開發(fā)過程中，使用到了公司內(nèi)部十分高效的工程化環(huán)境，特此打個廣告： 新浪移動誠招各種技術大大！可以私聊投簡歷哦！
效果預覽
效果分析
點擊作為動畫開始的起點,自動結束
每次效果產(chǎn)生多個拋物線粒子運動的元素，方向隨機，展示內(nèi)容不一樣，有空間上Z軸的大小變化
需求上可以無間隔點擊，即第一組動畫未結束可播放第二組動畫
動畫基本執(zhí)行時長一致
由以上四點分析后，動畫實現(xiàn)有哪些實現(xiàn)方案呢？
css操作態(tài)變換（如focus）使子元素執(zhí)行動畫
不可取，效果可多次連點，css狀態(tài)變換與需求不符
Js 控制動畫開始，事先寫好css動畫預置，通過class 包含選擇器切換動畫 例如： .active .items{animation:xxx ...;}
不可取，單次執(zhí)行動畫沒有問題，但是存在效果的固定，以及無法連續(xù)執(zhí)行動畫
事先寫好大量動畫，隱藏大量dom元素，動畫開始隨機選取dom元素執(zhí)行自己唯一的動畫keyframes
實現(xiàn)層面來說，行得通，但是評論列表長的時候，dom數(shù)量巨大，且css大量動畫造成代碼量沉重、無隨機性
拋棄css動畫，使用canvas 繪制動畫
可行，但是canvas維護成本略高，且自定義功能難設計，屏幕適配也有一定成本
js做dom創(chuàng)建，生成隨機css @keyframes
可行，但是創(chuàng)建style樣式表，引發(fā)css重新渲染頁面，會導致頁面的性能下降，且拋物線css的復雜度不低，暫不作為選
js 刷幀 做dom渲染
可行，但是刷幀操作會造成性能壓力
結論
canvas雖說可行，但由于其開發(fā)弊端 本次分享不以canvas為分享內(nèi)容，而是使用最后一種 js刷幀的dom操作
組件結構
由截圖分享，動畫可以分為兩個模塊，首先，隨機發(fā)散的粒子具有共性：拋物線動畫，淡出，渲染表情
而例子數(shù)量變多之后則為截圖中的效果
但是，由于性能原因，我們需要做到粒子的掌控，實現(xiàn)資源再利用，那么還需要第二個模塊，作為粒子的管控組件
所以： 此功能可使用兩個模塊進行開發(fā)： partical.js 粒子功能 與 boom.js 粒子管理
實現(xiàn) Partical.js
前置資源：拋物線運動的物理曲線需要使用Tween.js提供的速度函數(shù)
若不想引入Tween.js 可以使用以下代碼
重慶分公司
重慶分公司
* Tween.js
* t: current time（當前時間）；
* b: beginning value（初始值）；
* c: change in value（變化量）；
* d: duration（持續(xù)時間）。
* you can visit 'http://easings.net/zh-cn' to get effect *
const Quad = {
easeIn: function(t, b, c, d) {
return c * (t /= d) * t + b;
},
easeOut: function(t, b, c, d) {
return -c *(t /= d)*(t-2) + b;
},
easeInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
return -c / 2 * ((--t) * (t-2) - 1) + b;
}
}
const Linear = function(t, b, c, d) {
return c * t / d + b;
}粒子實現(xiàn)
實現(xiàn)思路：
希望在粒子管控組件時，使用new partical的方式創(chuàng)建粒子，每個粒子存在自己的動畫開始方法，動畫結束回調(diào)。
由于評論列表可能存在數(shù)量巨大的情況，我們希望只全局創(chuàng)建有限個數(shù)的粒子，那么則提供呢容器移除粒子功能以及容器添加粒子的功能，實現(xiàn)粒子的復用
partical_style.css
//粒子充滿粒子容器，需要容器存在尺寸以及relative定位
.Boom-Partical_Holder{
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}particle.js
import "partical_style.css";
class Partical{
// dom為裝載動畫元素的容器 用于設置位置等樣式
dom = null;
// 動畫開始時間
StartTime = -1;
// 當前粒子的動畫方向，區(qū)別上拋運動與下拋運動
direction = "UP";
// 動畫延遲
delay = 0;
// 三方向位移值
targetZ = 0;
targetY = 0;
targetX = 0;
// 縮放倍率
scaleNum = 1;
// 是否正在執(zhí)行動畫
animating = false;
// 粒子的父容器，標識此粒子被渲染到那個元素內(nèi)
parent = null;
// 動畫結束的回調(diào)函數(shù)列表
animEndCBList = [];
// 粒子渲染的內(nèi)容容器 slot
con = null;
constructor(){
//創(chuàng)建動畫粒子dom
this.dom = document.createElement("p");
this.dom.classList.add("Boom-Partical_Holder");
this.dom.innerHTML = `
Boom
`;
}
// 在哪里渲染
renderIn(parent) {
// dom判斷此處省略
parent.appendChild(this.dom);
this.parent = parent;
// 此處為初始化 slot 容器
!this.con && ( this.con = this.dom.querySelector(".Boom-Partical_con"));
}
// 用于父容器移除當前粒子
deleteEl(){
// dom判斷此處省略
this.parent.removeChild(this.dom);
}
// 執(zhí)行動畫，需要此粒子執(zhí)行動畫的角度，動畫的力度，以及延遲時間
animate({ deg, pow, delay } = {}){
// 后續(xù)補全
}
// 動畫結束回調(diào)存儲
onAnimationEnd(cb) {
if (typeof cb !== 'function') return;
this.animEndCBList.push(cb);
}
// 動畫結束回調(diào)執(zhí)行
emitEndCB() {
this.dom.style.cssText += `;-webkit-transform:translate3d(0,0,0);opacity:1;`;
this.animating = false;
try {
for (let cb of this.animEndCBList) {
cb();
}
} catch (error) {
console.warn("回調(diào)報錯:",cb);
}
}
// 簡易實現(xiàn)slot功能，向粒子容器內(nèi)添加元素
insertChild(child){
this.con.innerHTML = '';
this.con.appendChild(child);
}
}致此，我們先創(chuàng)建了一個粒子對象的構造函數(shù)，現(xiàn)在考慮一下我們實現(xiàn)了我們的設計思路嗎？
使用構造函數(shù)new Partical( )粒子
粒子實力對象存在 animate 執(zhí)行動畫方法
有動畫結束回調(diào)函數(shù)的存儲和執(zhí)行
設置粒子的父元素: renderIn 方法
父元素刪除粒子: deleteEl 方法
為了更好的展示粒子內(nèi)容，我們特意在constructor里創(chuàng)建了一個 Boom-Partical_con 元素用于模擬slot功能: insertChild方法，用于使用者展示不同的內(nèi)容進行爆炸
關于原生JS怎么實現(xiàn)爆炸的動態(tài)效果就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
