摘要：我們一貫的理念我們我笑哭一貫的理念是信仰和。第一點視差粒子幾行代碼為了看起來更簡潔，定義視差粒子層數的屬性就省略了，因為本身它就是層，也挺好的。演示四層，為了讓大家能更了解屬性的使用方法。又高大上，又可以緩解加載的等待心情。

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);
  };
};

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

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謝謝~。