原生JS怎么實(shí)現(xiàn)爆炸的動態(tài)效果-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)原生JS怎么實(shí)現(xiàn)爆炸的動態(tài)效果，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)2013年至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站設(shè)計、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司網(wǎng)站策劃，項目實(shí)施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元棗莊做網(wǎng)站,已為上家服務(wù),為棗莊各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220

通過原生js代碼，實(shí)現(xiàn)粒子爆炸效果組件
組件開發(fā)過程中，使用到了公司內(nèi)部十分高效的工程化環(huán)境，特此打個廣告：新浪移動誠招各種技術(shù)大大！可以私聊投簡歷哦！

效果預(yù)覽

原生JS怎么實(shí)現(xiàn)爆炸的動態(tài)效果

效果分析

點(diǎn)擊作為動畫開始的起點(diǎn),自動結(jié)束

每次效果產(chǎn)生多個拋物線粒子運(yùn)動的元素，方向隨機(jī)，展示內(nèi)容不一樣，有空間上Z軸的大小變化

需求上可以無間隔點(diǎn)擊，即第一組動畫未結(jié)束可播放第二組動畫

動畫基本執(zhí)行時長一致

由以上四點(diǎn)分析后，動畫實(shí)現(xiàn)有哪些實(shí)現(xiàn)方案呢？

css操作態(tài)變換（如focus）使子元素執(zhí)行動畫

不可取，效果可多次連點(diǎn)，css狀態(tài)變換與需求不符

Js 控制動畫開始，事先寫好css動畫預(yù)置，通過class 包含選擇器切換動畫例如： .active .items{animation:xxx ...;}

不可取，單次執(zhí)行動畫沒有問題，但是存在效果的固定，以及無法連續(xù)執(zhí)行動畫

事先寫好大量動畫，隱藏大量dom元素，動畫開始隨機(jī)選取dom元素執(zhí)行自己唯一的動畫keyframes

實(shí)現(xiàn)層面來說，行得通，但是評論列表長的時候，dom數(shù)量巨大，且css大量動畫造成代碼量沉重、無隨機(jī)性

拋棄css動畫，使用canvas 繪制動畫

可行，但是canvas維護(hù)成本略高，且自定義功能難設(shè)計，屏幕適配也有一定成本

js做dom創(chuàng)建，生成隨機(jī)css @keyframes

可行，但是創(chuàng)建style樣式表，引發(fā)css重新渲染頁面，會導(dǎo)致頁面的性能下降，且拋物線css的復(fù)雜度不低，暫不作為選

js 刷幀做dom渲染

可行，但是刷幀操作會造成性能壓力

結(jié)論

canvas雖說可行，但由于其開發(fā)弊端本次分享不以canvas為分享內(nèi)容，而是使用最后一種 js刷幀的dom操作

組件結(jié)構(gòu)

由截圖分享，動畫可以分為兩個模塊，首先，隨機(jī)發(fā)散的粒子具有共性：拋物線動畫，淡出，渲染表情

而例子數(shù)量變多之后則為截圖中的效果

但是，由于性能原因，我們需要做到粒子的掌控，實(shí)現(xiàn)資源再利用，那么還需要第二個模塊，作為粒子的管控組件

所以：此功能可使用兩個模塊進(jìn)行開發(fā)： partical.js 粒子功能與 boom.js 粒子管理

實(shí)現(xiàn) Partical.js

前置資源：拋物線運(yùn)動的物理曲線需要使用Tween.js提供的速度函數(shù)

若不想引入Tween.js 可以使用以下代碼

 
      * Tween.js
      * t: current time（當(dāng)前時間）；
      * 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; 
        }

粒子實(shí)現(xiàn)
實(shí)現(xiàn)思路：
希望在粒子管控組件時，使用new partical的方式創(chuàng)建粒子，每個粒子存在自己的動畫開始方法，動畫結(jié)束回調(diào)。
由于評論列表可能存在數(shù)量巨大的情況，我們希望只全局創(chuàng)建有限個數(shù)的粒子，那么則提供呢容器移除粒子功能以及容器添加粒子的功能，實(shí)現(xiàn)粒子的復(fù)用

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為裝載動畫元素的容器 用于設(shè)置位置等樣式
     dom = null;
     // 動畫開始時間
     StartTime = -1;
     // 當(dāng)前粒子的動畫方向，區(qū)別上拋運(yùn)動與下拋運(yùn)動
     direction = "UP";
     // 動畫延遲
     delay = 0;
     // 三方向位移值
     targetZ = 0;
     targetY = 0;
     targetX = 0;
     // 縮放倍率
     scaleNum = 1;
     // 是否正在執(zhí)行動畫
     animating = false;
     // 粒子的父容器，標(biāo)識此粒子被渲染到那個元素內(nèi)
     parent = null;
     // 動畫結(jié)束的回調(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 = `
             <p class="Boom-Partical_con">
                 Boom
             </p>
         `;
     }
     
     // 在哪里渲染
     renderIn(parent) {
         // dom判斷此處省略
         parent.appendChild(this.dom);
         this.parent = parent;
         // 此處為初始化 slot 容器
         !this.con && ( this.con = this.dom.querySelector(".Boom-Partical_con"));
     }
     
     // 用于父容器移除當(dāng)前粒子
     deleteEl(){
         // dom判斷此處省略
         this.parent.removeChild(this.dom);
     }
     
     // 執(zhí)行動畫，需要此粒子執(zhí)行動畫的角度，動畫的力度，以及延遲時間
     animate({ deg, pow, delay } = {}){
         // 后續(xù)補(bǔ)全
     }
     
     // 動畫結(jié)束回調(diào)存儲
     onAnimationEnd(cb) {
         if (typeof cb !== 'function') return;
         this.animEndCBList.push(cb);
     }
     
     // 動畫結(jié)束回調(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);
         }
     }
     
     // 簡易實(shí)現(xiàn)slot功能，向粒子容器內(nèi)添加元素
     insertChild(child){
         this.con.innerHTML = '';
         this.con.appendChild(child);
     }
 }

致此，我們先創(chuàng)建了一個粒子對象的構(gòu)造函數(shù)，現(xiàn)在考慮一下我們實(shí)現(xiàn)了我們的設(shè)計思路嗎？

使用構(gòu)造函數(shù)new Partical( )粒子
粒子實(shí)力對象存在 animate 執(zhí)行動畫方法
有動畫結(jié)束回調(diào)函數(shù)的存儲和執(zhí)行
設(shè)置粒子的父元素: renderIn 方法
父元素刪除粒子: deleteEl 方法

為了更好的展示粒子內(nèi)容，我們特意在constructor里創(chuàng)建了一個 Boom-Partical_con 元素用于模擬slot功能: insertChild方法，用于使用者展示不同的內(nèi)容進(jìn)行爆炸

關(guān)于原生JS怎么實(shí)現(xiàn)爆炸的動態(tài)效果就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章名稱：原生JS怎么實(shí)現(xiàn)爆炸的動態(tài)效果-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址：http://muchs.cn/article14/hejde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、做網(wǎng)站、網(wǎng)站設(shè)計公司、標(biāo)簽優(yōu)化、動態(tài)網(wǎng)站、網(wǎng)站維護(hù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容