動畫


Naboo 是一個前端動畫解決方案，包含動畫調度機制和動畫工具集，支援串並行動畫及回調，支援自訂外掛；

1. 聲明

可以在類別和實例中根據場景進行挑選使用

var util = require('util');

// 类对象
var Naboo = util.naboo;

// 实例对象
var naboo = new util.naboo();
naboo.animate(...);

2. 使用

1) naboo.animate(dom, prop, opt)

  • #描述：animate插件，專門用於進行動畫操作的插件

  • 參數列表：

Object是需要進行動畫的dom元素#propObject#是需要進行動畫π的css屬性鍵值對物件optObject否可選的動畫參數物件opt.durationnumber否動畫時長，預設值400，單位msopt.easestring否動畫的緩動函數名，預設值ease，可選值包括ease 、linear、ease-in、ease-out、ease-in-outopt.delaynumber# #動畫延遲執行的時間，預設值0，單位msopt.cbFunction否動畫完成後面的回呼函數opt.modestring否動畫的模式，預設值transition，可選值包括transition、keyframes(暫未支援)、js(暫未支援)
參數類型必選描述
dom
  • 程式碼範例
      naboo.animate(dom, {
      'transform': 'translateX(200px)'
  }, {
      duration: 2000,
      ease: 'ease',
      delay: 1000,
      mode: 'transition',
      cb: function() {
          console.log(1);
      }
  }).start();

2) naboo. start(fn)

  • 描述：開始執行動畫的指令函數

  • #參數清單：
類型#必選
##參數
#描述
##################### #fn######Function######否#######動畫完成後的回呼函數############

  • 使用範例：

      naboo.animate(dom, {      'transform': 'translateX(200px)'
  }, {
      duration: 2000
  }).start();

3) naboo.next()

  • 說明：讓動畫進入下一步的指令函數，在呼叫done 或register（註冊外掛）方法需要呼叫next() 才能進入下一個動畫；

  • ##參數列表：無

    • ##使用範例：
  •   naboo.animate(dom, {      'transform': 'translateX(200px)'
  }, {
      duration: 2000
  }).done(function(next) {
      console.log(1);
      next();
  });

    • 4) naboo.cancel()

    說明：取消動畫的指令，呼叫函數後，目前未執行完的動畫仍會繼續執行完成，後續的動畫不會執行

    • 參數清單：無

  • ##使用範例： 
    •   var instance;
  btnStart.onclick = function () {
      instance = naboo.animate(dom, {
          'transform': 'translateX(200px)'
      }, {
          duration: 2000,
          cb: function() {
              console.log(1);
          }
      }).start();
  }
  btnCancel.onclick = function () {
      instance.cancel();
  }

  • 5) naboo.on(name, fn)

#描述：事件綁定，可以透過此函數綁定自訂事件

  • 參數清單：

#參數類型#必選描述namestring是#事件名fnFunction是事件觸發的方法##使用範例：
  var handle = function(event) {
      console.log(event);
  }
  btn.onclick = function () {
      naboo.on("customer", handle);
  }

  • 6) naboo.off(name, fn)

說明：解除事件綁定

  • 參數清單：

參數##類型必選描述namestring否#事件名，若為空則解除所有事件fnFunction否事件觸發的方法，若為空則解除該name下所有事件使用範例：
  var handle = function(event) {
      console.log(event);
  }
  btn.onclick = function () {
      console.log('解除事件');
      naboo.off("customer", handle);
  }
  • 7) naboo.trigger (name, data)

描述：觸發事件

  • 參數清單：

    • 參數
類型必選描述namestring是事件名，如果為空則解除所有事件否#使用範例：
  btn.onclick = function () {
      naboo.trigger("customer", {
          a: 1
      });
  }
8) naboo.p(list)
##dataObject
觸發事件時需要傳遞的資料

  • 描述：Naboo的平行插件，透過該方式可以將多個動畫並發執行，可以透過類別或實例物件進行呼叫

    • 參數清單：

  • #參數
類型##必選描述listarray是需要並行的naboo物件列表

  • 使用範例：

      naboo.p(
      naboo.animate(dom1, {
          'transform': 'translateX(200px)'
      }, {
          duration: 2000,
          cb: function() {
              console.log(1);
          }
      }),

      naboo.animate(dom2, {
          'transform': 'translateX(200px)'
      }, {
          duration: 3000,
          cb: function() {
              console.log(2);
          }
      })
  ).start();

8) naboo.done(fn)

  • 描述：Naboo的done插件，可用於在任何一個動畫插件後進行回調，可以透過類別或實例物件進行呼叫；

  • 注意：需要在該方法中呼叫next() 才能進入下一步的動畫，因為考慮到可能會有一些異步行為，如ajax 請求

  • #參數列表：

##參數類型必選描述fnfunction是回呼函數
  • #使用範例：

      naboo.animate(dom1, {
      'transform': 'translateX(200px)'
      }, {
          duration: 2000,
          cb: function() {
              console.log(1);
          }
      }).done(function(next) {
          console.log(2);
          next();
      }).animate(dom2, {
          'transform': 'translateX(200px)'
      }, {
          duration: 2000,
          ease: "ease",
          cb: function() {
              console.log(3);
          }
  }).start();

P.S.: 範例程式碼標識在dom1的動畫執行完成後再執行dom2的動畫

3. 類別的靜態方法：Naboo.register(name, fn)

  • 描述：外掛程式註冊函數，如果animate不能滿足需求，也或是站長需要封裝自己的外掛程式來做到方便調用，可以透過該方式來進行方法註冊；

  • 注意：實作register fn時需呼叫next()才能執行下一個動畫；

  • 參數清單：

參數類型##描述fnfunction是外掛函數，用來定義外掛程式的執行邏輯
  • 使用範例：

       Naboo.register('animate', function (next, dom, prop, opt) {
      opt = opt || {};
      var cb = opt.cb;
      opt.cb = function () {
          cb && cb();
          next();
      };
      opt.mode = ([
          'transition'
      ].indexOf(opt.mode) > -1) ? opt.mode : 'transition';
      Naboo[opt.mode](dom, prop, opt);
  });

#
←
→