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感谢~。