JavaScript學習之煙花特效實作（面向物件）

煙花特效的實作

本特效使用面向物件編程

分析

• OOA

  • 點擊觸發事件
  • 煙花運動分成兩個階段
    • 向上飛
    • 爆炸

• OOD

  class FireWork{
      constructor(){
          
      }
      bindEvent(){
          let _this = this;
          ele.onclick = function(){
              //fly結束再去呼叫boom函式
              _this.fly(_this.boom);
          }
      }
      fly(boom){
          
      }
      boom(){
          
      }
  }
  

CSS設計實作

• CSS代碼

  
      *{
          margin: 0;
          padding: 0;
      }
      #box{
          width:800px;
          height:600px;
          position: relative;
          margin: 100px auto;
          background:#000000;
          border:2px solid red;
          overflow: hidden;
      }
      .ball{
          width: 40px;
          height: 40px;
          border-radius: 50%;
          position: absolute;
          bottom: 0;
      }
  
  

JS編程實作

• javascript代碼

  <script src="./utils.js"></script>
  <script>
  // 
  class FireWork{
      constructor(){
          this.box = document.getElementById("box");
          this.box_offset = {
                left : box.offsetLeft,
                top  : box.offsetTop
          }
      }
      bindEvent(){
          let _this = this;
          this.box.onclick = function( e ){
                e = e || event;
                _this.x = e.clientX - _this.box_offset.left; 
                _this.y = e.clientY - _this.box_offset.top; 
      
                _this.fly(_this.boom);
          }     
      }     
      fly( boom ){
          let ele = this.createEle();
          let _this = this;
          // 放入box之中; 
          ele.style.left = this.x + "px";
      
          let _left = this.x ; 
          let _top  = this.y ; 
      
          animate( ele , {
                top : this.y 
          } , function(){
                ele.remove();
                _this.boom( _left , _top );
          });
      }
      boom( x , y ){
          let r = 100;
          let count = 0 ; 
          let _this = this;
      
          for(let i = 0 ; i < 20 ; i ++){
                let ele = this.createEle();
                ele.style.left = x +"px";
                ele.style.top  = y + "px";
                let _left =  parseInt(Math.cos( Math.PI / 10 * i ) * r ) + x ;
                let _top =  parseInt(Math.sin(  Math.PI / 10 * i ) * r) + y
                animate( ele , {
                      left : _left,
                      top  : _top,
                      opacity : 0 
                } , function(){
                      ele.remove();
                })
          }
      }
      createEle(){
          let ele = document.createElement("div");
          ele.className = "ball";
          ele.style.backgroundColor = `rgb(${parseInt(Math.random() * 255)},${parseInt(Math.random() * 255)},${parseInt(Math.random() * 255)})`;
          this.box.appendChild( ele );
          return ele ; 
      }
  }
  
  new FireWork().bindEvent();
  </script>
  

• 參考的utils.js檔案

  function on(dom, event_name, handler_selector, delegation_handler) {
      if( typeof handler_selector === "string" && typeof delegation_handler === "function"){
          return delegation(dom, event_name, handler_selector, delegation_handler);
      }
      // 在dom物件里面建立一個事件名 : 事件處理函式對應的陣列; 
      // 判定當前事件處理函式是否在dom物件之中;
      var event_type = "_" + event_name;
      if (event_type in dom) {
          dom[event_type].push(handler_selector);
      } else {
          dom[event_type] = [handler_selector];
      }
      // 如果直接用事件名當成物件之中的key值，那么會和原有的dom功能名稱沖突; 
      // 因為特殊的事件名會導致事件無法觸發，所以我們在這里要對事件名進行拆分處理; 
      dom.addEventListener(event_name.split(".")[0], handler_selector)
  }
  function off(dom, event_name) {
      // 獲取到dom物件里面事件名對應的一組事件處理函式; 
      var callback_list = dom["_" + event_name];
      // 根據串列里面的所有函式進行事件移除 ; 
      callback_list.forEach(function (event_handler) {
          dom.removeEventListener(event_name.split(".")[0], event_handler);
      })
      // 清空dom物件里面的事件處理函陣列; 
      dom["_" + event_name].length = 0;
  }
      
  function trigger(dom, event_type) {
      dom.dispatchEvent(new Event(event_type));
  }
      
  function delegation(dom, event_name, selector, event_handler) {
      dom.addEventListener(event_name, function (e) {
          e = e || event;
          var target = e.target || e.srcElement;
          while (target !== dom) {
                switch (selector[0]) {
                      case ".":
                            if (selector.slice(1) === target.className) {
                                  event_handler.call(target , e )
                                  return;
                            }
                      case "#":
                            if (selector.slice(1) === target.id) {
                                  event_handler.call(target, e)
                                  return;
                            }
                      default:
                            if (selector.toUpperCase() === target.nodeName) {
                                  event_handler.call(target, e)
                                  return;
                            }
                }
                target = target.parentNode;
          }
      })
  }
  
  
  function animate( dom , attrs , callback , transition = "buffer", speed = 10 ){
      // transition : 有兩種影片方式 "buffer" , "liner"
      var _style = getComputedStyle( dom );
      
      // - 1. 資料變形 ; 
      for(var attr in attrs ){
          attrs[attr] = {
                target : attrs[attr],
                now    : _style[attr]
          }
          // - 2. 速度 : 勻速運動速度正負 ; 
          if( transition === "liner" ){
                attrs[attr].speed = attrs[attr].target > attrs[attr].now ? speed : - speed;
          }
      
          if( attr === "opacity"){
                attrs[attr].target *= 100 
                attrs[attr].now    *= 100
          }else{
                attrs[attr].now = parseInt(attrs[attr].now) 
          }
      }
      // - 關閉開啟定時器;    
      clearInterval( dom.interval );
      dom.interval = setInterval( function(){
          for(var attr in attrs ){
                // 取出當前值和屬性值 ; 
                // attrs[attr].target : 目標值; 
                // attrs[attr].now    : 當前值; 
      
                let { target , now } = attrs[attr];
      
                // 緩沖運動時候的速度; 
                if( transition === "buffer" ){
                      var speed = (target - now ) / 10 ;
                      speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );
                }else if(transition === "liner"){
                      var speed =  attrs[attr].speed; 
                }
      
                
                if( Math.abs(target - now) <= Math.abs( speed ) ){
                      
                      if( attr === "opacity"){
                            dom.style[attr] = target / 100;
                      }else{
                            dom.style[attr] = target  + "px";
                      }
      
                      delete attrs[attr];
                      for(var attr in attrs ){
                            // 如果有資料回圈會執行至少一次; 
                            return false;
                      }
                      clearInterval(dom.interval);
                      typeof callback === "function" ? callback() : "";
                }else{
                      now += speed;
      
                      if( attr === "opacity"){
                            dom.style[attr] = now / 100;
                      }else{
                            dom.style[attr] = now  + "px";
                      }
                      // 給物件賦值; 
                      attrs[attr].now = now;
                }
          }
      } , 30)
  }
  
  

  原創不易，轉載請注明出處，