JParticles2.0发布，打造炫酷粒子效果。不好意思，在这样一个花团锦簇的世界里，标题必须要抢眼，否则……进入正题。下面简单介绍一下JParticles。在2.0版本之前，它仍然被称为Particleground.js。使用过的朋友应该不会陌生。1.x版本的宣传文案，可以移步这里，或许可以帮助大家了解JParticles2.0的一些事情。我们一贯的理念我们（我/笑着哭着）一贯的理念是信念：“少写，多做”和“保持简单和愚蠢”。希望插件工具使用起来非常简单方便，上手快，不要浪费人们宝贵的时间，尤其是在瞬息万变的前端。希望我们的代码简洁、简单、易懂，API设计简洁。易于使用，最终功能强大，易于扩展！来看看这个版本的更新日志，看看我们这个版本更新了什么，biubiu...贴：好像挺多的，就说三个要点吧，其他的都可以找官网上的，哈哈第一点：视差粒子https://codepen.io/barrior/pe...几行JavaScript代码：为了看起来更简洁，省略了定义视差粒子层数的属性，因为它本身有3层，很好。CodePen演示了四层，就是为了让大家更加了解属性的使用方法。newJParticles.particle('#demo',{//开启视差效果parallax:true,//定义视差强度parallaxStrength:1});难得吗。。。小到想哭，不过好爽~第二点：模拟语音搜索学习京东APP的搜索，上图：https://codepen.io/barrior/pe...JavaScript代码：如果你用过1.x，相信你对wave的参数配置很熟悉，也很好理解。我们删除了旧方法setOffsetTop()并添加了一个新方法：setOptions()。这种方法更加强大和自由，可以控制更多属性的变化，达到我们想要的效果。这里我们主要控制的是这个方法，只是按住这个自定义事件是用户自己的行为，所以把自定义代码贴在这里，让我们简单的API看起来很复杂，错了~其实只有两个，看下面的注释。varsettings={crestHeight:[10,14,18],speed:.1};//这里是要点①//JParticles.utils.extend等价于jQuery.extend，也可以用Object.assign代替。vareffect=newJParticles.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(){varcrestHeight=settings.crestHeight.map(function(item){//获取随机波动值item+=JParticles.utils.limitRandom(20,-20);//Process(0,1)之间的值都是整数if(item<1&&item>0){item=Math.ceil(item);}returnitem;});//这里是②部分//由setOptions()线波动effect.setOptions({crestHeight:crestHeight,speed:[.2,.14,.1]});},100);//恢复varself=this;document.onmouseup=function(){文档。onmouseup=null;clearInterval(self.timer);effect.setOptions（设置）；};};第三点：waveLoading模拟进度条加载这是一个封装好的，简单易用的模拟加载进度条动画。1.x版本使用波浪运动手写加载进度条的内容，不是很方便，而且参数的控制也比较麻烦，所以2.0着重封装了模拟加载进度条的动画。这个特效在单页应用中第一次加载，还是需要一些东西。高大上，可以缓解等待装车的心情。下面我们就来看看如何轻松使用这个特效吧。我们以加载百度首页为例。貌似其他的iframe是不允许加载的：https://codepen.io/barrior/pe...简单的JavaScript代码（CodePen的代码是调整细节，核心内容简单如下）：vardemo=document.querySelector('.demo');//生成加载动画varloading=newJParticles.waveLoading(demo);//当你告诉loading加载完成，loading就会加载完成，触发这个事件loading.onFinished(function(){//此时可以删除loading动画，让页面显示demo.parentNode.removeChild(demo);});//加载完成后，告诉loading加载完成，让loading结束//因为这是一个模拟的进度条，所以此时你要告诉loading才能知道页面已经加载完毕。onload=function(){loading.done();};道歉。为此我还是要道歉。我答应新版本加入QQ登录背景效果（Delaunay三角形的实现）。由于时间仓促，Delaunay三角形的实现暂时还没有研究。当然其实你也可以用三角函数做出效果再贴出来，不过这样会耽误新版本的发布。能用的先放出来，能用的先用，以后再慢慢补充其他有意思的。事情来了，在此，向看过更新日志并充满期待的战友们表示深深的歉意！最后，官网（我觉得这应该是一个很棒的文档，因为写的很用心）：jparticles.js.org如果你喜欢这个插件库，能够在你的实际工作中帮助到你，希望它能发展的更好，提供更多有趣实用的特效，支持作者请点个星O(∩_∩)O谢谢~。
