JParticles 2.0 發佈，打造炫酷的粒子特效

JParticles 2.0 發佈，打造炫酷的粒子特效。
很差意思哈，在這麼繁花似錦的世界裏，標題不得不取得吸引眼球一點哈，
否則...仍是不囉嗦了，咱們進入正題吧

簡單介紹一下

JParticles 2.0 版本以前還叫 Particleground.js，相信在用的朋友應該不會陌生，關於 1.x 版本的宣傳文案能夠移步看這裏哈，或許能夠幫助你瞭解 JParticles 2.0 的一些東西。

咱們一向的理念

咱們（我/笑哭）一向的理念是信仰："The Write Less, Do More" 和 "Keep It Simple And Stupid"。
但願插件工具什麼的使用起來很是的簡單便捷，上手快，不耽誤人們寶貴的時間，尤爲是在變化迅速的前端，
但願咱們的 代碼寫得簡潔，簡單，易懂，API設計的簡潔，簡單，易用， 最後 強大，易擴展！

這次版本更新日誌

看看咱們此次版本更新了哪些東西吧，biubiu...貼圖：

貌似挺多的，主要咱們仍是隻講三點吧，剩下的能夠看官網慢慢了解，哈哈。

第一點：視差粒子

https://codepen.io/barrior/pe...

幾行 JavaScript 代碼：

爲了看起來更簡潔，定義視差粒子層數的屬性就省略了，由於自己它就是 3 層，也挺好的。
CodePen 演示四層，爲了讓你們能更瞭解屬性的使用方法。

new JParticles.particle('#demo', {
  // 開啓視差效果
  parallax: true,
  
  // 定義視差強度
  parallaxStrength: 1
});

是否是好少...少到想哭有木有，可是很酷炫~

第二點：模擬語音搜索

學習於京東APP的搜索，上圖：

https://codepen.io/barrior/pe...

上 JavaScript 代碼：

若是你使用過 1.x, 相信你對 wave 的參數配置很理解，
咱們刪除了以前的舊方法 setOffsetTop()，添加了新方法：setOptions()，
這個方法就更增強大與自由了，能夠控制更多的屬性的變化，達到咱們想要的效果。
這裏咱們主要的控制就是這個方法了，只是按住這個自定義事件是用戶本身的行爲，
因此這裏貼上自定義代碼把咱們簡潔的 API，弄的好像很複雜了同樣，冤枉~
其實一共就兩處，見下面標註。

var settings = {
  crestHeight: [10, 14, 18],
  speed: .1
};

// 這裏是第 ① 處
// JParticles.utils.extend 等同於 jQuery.extend，你也可使用 Object.assign 替代。
var effect = new JParticles.wave('.instance .demo', JParticles.utils.extend({
  num: 3,
  lineColor: ['#e53d27', '#42e527', '#27C9E5'],
  lineWidth: [.7, .9, 1],
  offsetTop: .65,
  rippleNum: 2
}, settings));

// 線條波動效果
document.querySelector('.voice').onmousedown = function () {
  clearInterval(this.timer);
  this.timer = setInterval(function () {
    var crestHeight = settings.crestHeight.map(function (item) {

      // 獲取隨機波動值
      item += JParticles.utils.limitRandom(20, -20);

      // 處理 (0, 1) 之間的值爲整數
      if (item < 1 && item > 0) {
        item = Math.ceil(item);
      }

      return item;
    });

    // 這裏是第 ② 處
    // 經過 setOptions() 來控制線條的波動
    effect.setOptions({
      crestHeight: crestHeight,
      speed: [.2, .14, .1]
    });
  }, 100);

  // 復原
  var self = this;
  document.onmouseup = function () {
    document.onmouseup = null;
    clearInterval(self.timer);
    effect.setOptions(settings);
  };
};

第三點：waveLoading 模擬進度條加載

這是一個封裝好的，簡單易用的模擬加載進度條動畫。

1.x 版本是經過 wave 這個波浪運動來手寫加載進度條的內容，並非很方便，參數的控制也麻煩，
因而 2.0 着重封裝了這個模擬加載進度條的動畫，這個特效在單頁應用首次加載什麼的仍是很須要的吧。
又高大上，又能夠緩解加載的等待心情。

如今就來看看是怎麼簡單的使用這個功能特效吧，咱們以加載 baidu.com 首頁爲示例，貌似其餘的不容許 iframe 加載:

https://codepen.io/barrior/pe...

簡單的 JavaScript 代碼（CodePen 的代碼是有對細節進行調整，而核心內容就是下面這麼簡單）：

var demo = document.querySelector('.demo');

// 生成 loading 動畫
var loading = new JParticles.waveLoading(demo);

// 當你告訴 loading 加載完了，loading 就加載結束，並觸發這個事件
loading.onFinished(function () {
    
    // 這時，你就能夠刪除 loading 動畫了，讓頁面顯示出來
    demo.parentNode.removeChild(demo);
});

// 加載完，告訴 loading 加載完了，讓 loading 結束
// 由於這是模擬進度條，因此你得告訴 loading，它才知道頁面此時已經加載完了
window.onload = function () {
    loading.done();
};

致歉

這個仍是得致歉，以前承諾的會在新版增長QQ登陸背景效果（Delaunay三角的實現），因爲時間也挺趕的，
如今還沒研究出Delaunay三角的實現，固然其實也能夠用等研究好三角函數作出效果來了再發，可是這樣就耽誤的新版的發佈，還不如先把能用的發出來，先用着能用的，後續再慢慢添加其餘有意思的東西進來。
此處，對看過更新日誌並滿懷期待的同志表示深深的歉意！

最後

官網（我想這應該是一個很是棒的文檔，由於很用心在寫）：jparticles.js.org
若是你喜歡這個插件庫並能幫助到你的實際工做中，但願它能發展的更好，提供更多有趣實用的特效，支持做者，煩請點個 Star O(∩_∩)O謝謝~。