摘要：我們一貫的理念我們我笑哭一貫的理念是信仰和。第一點(diǎn)視差粒子幾行代碼為了看起來(lái)更簡(jiǎn)潔，定義視差粒子層數(shù)的屬性就省略了，因?yàn)楸旧硭褪菍?，也挺好的。演示四層，為了讓大家能更了解屬性的使用方法。又高大上，又可以緩解加載的等待心情。

JParticles 2.0 發(fā)布，打造炫酷的粒子特效。
不好意思哈，在這么繁花似錦的世界里，標(biāo)題不得不取得吸引眼球一點(diǎn)哈，
不然...還是不啰嗦了，我們進(jìn)入正題吧

JParticles 2.0 版本之前還叫 Particleground.js，相信在用的朋友應(yīng)該不會(huì)陌生，關(guān)于 1.x 版本的宣傳文案可以移步看這里哈，或許可以幫助你了解 JParticles 2.0 的一些東西。

我們（我/笑哭）一貫的理念是信仰："The Write Less, Do More" 和 "Keep It Simple And Stupid"。
希望插件工具什么的使用起來(lái)非常的簡(jiǎn)單便捷，上手快，不耽誤人們寶貴的時(shí)間，尤其是在變化迅速的前端，
希望我們的 代碼寫(xiě)得簡(jiǎn)潔，簡(jiǎn)單，易懂，API設(shè)計(jì)的簡(jiǎn)潔，簡(jiǎn)單，易用， 最后 強(qiáng)大，易擴(kuò)展！

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

貌似挺多的，主要我們還是只講三點(diǎn)吧，剩下的可以看官網(wǎng)慢慢了解，哈哈。

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

幾行 JavaScript 代碼：

為了看起來(lái)更簡(jiǎn)潔，定義視差粒子層數(shù)的屬性就省略了，因?yàn)楸旧硭褪?3 層，也挺好的。
CodePen 演示四層，為了讓大家能更了解屬性的使用方法。

new JParticles.particle("#demo", {
  // 開(kāi)啟視差效果
  parallax: true,
  
  // 定義視差強(qiáng)度
  parallaxStrength: 1
});

是不是好少...少到想哭有木有，但是很酷炫~

學(xué)習(xí)于京東APP的搜索，上圖：

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

上 JavaScript 代碼：

如果你使用過(guò) 1.x, 相信你對(duì) wave 的參數(shù)配置很理解，
我們刪除了之前的舊方法 setOffsetTop()，添加了新方法：setOptions()，
這個(gè)方法就更加強(qiáng)大與自由了，可以控制更多的屬性的變化，達(dá)到我們想要的效果。
這里我們主要的控制就是這個(gè)方法了，只是按住這個(gè)自定義事件是用戶自己的行為，
所以這里貼上自定義代碼把我們簡(jiǎn)潔的 API，弄的好像很復(fù)雜了一樣，冤枉~
其實(shí)一共就兩處，見(jiàn)下面標(biāo)注。

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

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

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

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

      return item;
    });

    // 這里是第 ② 處
    // 通過(guò) setOptions() 來(lái)控制線條的波動(dòng)
    effect.setOptions({
      crestHeight: crestHeight,
      speed: [.2, .14, .1]
    });
  }, 100);

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

這是一個(gè)封裝好的，簡(jiǎn)單易用的模擬加載進(jìn)度條動(dòng)畫(huà)。

1.x 版本是通過(guò) wave 這個(gè)波浪運(yùn)動(dòng)來(lái)手寫(xiě)加載進(jìn)度條的內(nèi)容，并不是很方便，參數(shù)的控制也麻煩，
于是 2.0 著重封裝了這個(gè)模擬加載進(jìn)度條的動(dòng)畫(huà)，這個(gè)特效在單頁(yè)應(yīng)用首次加載什么的還是很需要的吧。
又高大上，又可以緩解加載的等待心情。

現(xiàn)在就來(lái)看看是怎么簡(jiǎn)單的使用這個(gè)功能特效吧，我們以加載 baidu.com 首頁(yè)為示例，貌似其他的不允許 iframe 加載:

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

簡(jiǎn)單的 JavaScript 代碼（CodePen 的代碼是有對(duì)細(xì)節(jié)進(jìn)行調(diào)整，而核心內(nèi)容就是下面這么簡(jiǎn)單）：

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

// 生成 loading 動(dòng)畫(huà)
var loading = new JParticles.waveLoading(demo);

// 當(dāng)你告訴 loading 加載完了，loading 就加載結(jié)束，并觸發(fā)這個(gè)事件
loading.onFinished(function () {
    
    // 這時(shí)，你就可以刪除 loading 動(dòng)畫(huà)了，讓頁(yè)面顯示出來(lái)
    demo.parentNode.removeChild(demo);
});

// 加載完，告訴 loading 加載完了，讓 loading 結(jié)束
// 因?yàn)檫@是模擬進(jìn)度條，所以你得告訴 loading，它才知道頁(yè)面此時(shí)已經(jīng)加載完了
window.onload = function () {
    loading.done();
};

這個(gè)還是得致歉，之前承諾的會(huì)在新版增加QQ登錄背景效果（Delaunay三角的實(shí)現(xiàn)），由于時(shí)間也挺趕的，
現(xiàn)在還沒(méi)研究出Delaunay三角的實(shí)現(xiàn)，當(dāng)然其實(shí)也可以用等研究好三角函數(shù)做出效果來(lái)了再發(fā)，但是這樣就耽誤的新版的發(fā)布，還不如先把能用的發(fā)出來(lái)，先用著能用的，后續(xù)再慢慢添加其他有意思的東西進(jìn)來(lái)。
此處，對(duì)看過(guò)更新日志并滿懷期待的同志表示深深的歉意！

官網(wǎng)（我想這應(yīng)該是一個(gè)非常棒的文檔，因?yàn)楹苡眯脑趯?xiě)）：jparticles.js.org
如果你喜歡這個(gè)插件庫(kù)并能幫助到你的實(shí)際工作中，希望它能發(fā)展的更好，提供更多有趣實(shí)用的特效，支持作者，煩請(qǐng)點(diǎn)個(gè) Star O(∩_∩)O謝謝~。