开源造轮子：一个简约，高效，轻量级，酷炫的不要不要的canvas粒子活动插件库

一：开篇

哈哈哈，谢谢题目党的到临~

虽然题目有点夸大的觉得，但现实上，插件库确实是简约，高效，轻量级，酷炫酷炫的咯。
空话不多说，先来看个标配例子吧：

http://codepen.io/barrior/pen&＃8230;

是吧，应该是酷炫酷炫的吧，不喜好的话能够向下看更多的例子哦~

二：说说我(们)的理念：

厌倦市场上头昏眼花，百花齐放，百鸟争鸣的繁荣景象，我心枯槁&＃8230;
像我这类头脑简朴，四肢也简朴的人就合适简朴的API，简朴人和物 (。・_・)/~~~
好吧，照样说回代码吧，API设想愿望"The Write Less, Do More"和"Keep it Simple and Stupid"的情势，谢绝绕弯子API，崇尚简约，简约！
所以你会跟作者一样，运用起这个插件会觉获得很爽，很轻松，嘎嘎嘎~ 不信看看接下来的一切结果展现。

三：一切结果展现

如今插件库供应了三种殊效：粒子无序活动，波浪活动，雪花飘落殊效。
固然，设置差别的API参数值，也许能够获得挺多差别的殊效呢！
上面已演示过标配的粒子无序活动啦，下面演示背面两种。

1、波浪活动·标配

http://codepen.io/barrior/pen&＃8230;

js代码（结果参考QQ电话）：

new Particleground.wave( '#demo', {
num: 3,
// 三条线顺次的色彩
lineColor: ['rgba(0, 190, 112, .5)', 'rgba(0, 190, 112, .7)', 'rgba(0, 190, 112, .9)'],
// 三条线顺次的宽度
lineWidth: [.5, .7, .9],
// 三条线顺次的向左偏移值
offsetLeft: [2, 1, 0],
// 三条线都向上偏移容器高度的0.75倍
offsetTop: .75,
// 三条线顺次的波峰高度
crestHeight: [10, 14, 18],
// 三条线都只需两个波峰（波纹）
rippleNum: 2,
speed: .1,
// 隐蔽添补，默许false
fill: false,
// 显现边框，即线条结果，默许true
stroke: true
});


假如你英语能够的话，置信看属性名连系结果就也许晓得设置是什么意义啦，不然的话你能够看看官网对这几个API的形貌，戳这里哈。

2、波浪活动·loading动画

http://codepen.io/barrior/pen&＃8230;

这个js代码就不贴啦，须要本身写加载的进度，然后设置到结果上哈。

3、雪花飘落殊效

http://codepen.io/barrior/pen&＃8230;

极简朴的js代码：

new Particleground.snow('#demo');


四：诠释题目

好啦，结果看完啦，如今诠释一下题目的那几个宣扬字眼，虽然彷佛并没有什么用&＃8230;

简约：

• 就像前面的粒子活动例子，只须要一行简朴的代码 new Particleground.particle('#demo') 就能够完成啦。

• 然后就是“洁”：这个须要浏览源码咯，置信从源码中你会看到代码的简约文雅的，详细请戳这里啦~

• 固然，殊效也是简约雅观的啦，对不起视觉的结果为何还要用代码去完成它呢&＃8230;

高效：

• 在作者的才能基本之上，代码能优化的处所作者都想尽了要领去优化它(包括机能的优化，代码的简化)。

• 比方：this关键字的在另一个函数内贮存成变量参数运用，屡次运用到的深度属性或要领贮存成变量运用，既到达紧缩时可削减体积，又到达削减变量查找的耗时。

• 比方：粒子无序活动的连线功用处置惩罚，嵌套for轮回，O(n²)的题目，作者优化了三次(git commit有纪录咯)，末了运用(进修自创)了《HTML5+Javascript动画基本》这本书的一个头脑和优化体式格局，到达既不冗余代码或占用内存，又提升了一倍的实行效力。详细可点击这里，源码第160行哦。

轻量级：

• 因为前面说到的两点，轻量级天然就孕育而生啦。

• 另一个就是殊效之间都是以自力的插件情势运用的，不存在相互依靠的题目，只依靠一个大众的功用文件，如许就能够到达想加载什么就加载什么，按需加载的不痴肥体验啦，也能够偷懒直接运用包括一切殊效的紧缩包文件咯。

五：末了

• 一个优越的官网及文档是一个优越的最先，插件库官网：particleground.duapp.com, 先用着这个域名咯，等时机成熟了，再换回正式的 pjs.barrior.me 域名~

• 孝敬老是受欢迎的，不管它多么大或小！只需你与作者的看法，理念，同舟共济的话，那就太愿望你到场构造的度量啦，做一件本身喜好的事，做一个本身都喜好本身的人。

• 假如你喜好这个插件库并能协助到你的现实工作中，愿望它能生长的更好，供应更多风趣有用的殊效，支撑我(们)，烦请点个 Star 吧。