開源造輪子：一個簡潔，高效，輕量級，酷炫的不要不要的canvas粒子運動插件庫

一：開篇

哈哈哈，感謝標題黨的蒞臨~

雖然標題有點誇張的感受，但實際上，插件庫確實是簡潔，高效，輕量級，酷炫酷炫的咯。
廢話很少說，先來看個標配例子吧：

http://codepen.io/barrior/pen...

是吧，應該是酷炫酷炫的吧，不喜歡的話能夠向下看更多的例子哦~

二：說說我(們)的理念：

厭倦市場上眼花繚亂，百花齊放，百鳥爭鳴的繁榮景象，我心憔悴...
像我這種頭腦簡單，四肢也簡單的人就適合簡單的API，簡單人和物 (。・_・)/~~~
好吧，仍是說回代碼吧，API設計希翼"The Write Less, Do More"和"Keep it Simple and Stupid"的形式，拒絕繞彎子API，崇尚簡潔，簡約！
因此你會跟做者同樣，使用起這個插件會感受到很爽，很輕鬆，嘎嘎嘎~ 不信看看接下來的全部效果展現。

三：全部效果展現

目前插件庫提供了三種特效：粒子無序運動，波浪運動，雪花飄落特效。
固然，配置不一樣的API參數值，或許能夠獲得挺多不一樣的特效呢！
上面已經演示過標配的粒子無序運動啦，下面演示後面兩種。

一、波浪運動·標配

http://codepen.io/barrior/pen...

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的描述，戳這裏哈。

二、波浪運動·loading動畫

http://codepen.io/barrior/pen...

這個js代碼就不貼啦，須要本身寫加載的進度，而後設置到效果上哈。

三、雪花飄落特效

http://codepen.io/barrior/pen...

極簡單的js代碼：

new Particleground.snow('#demo');

四：解釋標題

好啦，效果看完啦，如今解釋一下標題的那幾個宣傳字眼，雖然好像並無什麼用...

簡潔：

• 就像前面的粒子運動例子，只須要一行簡單的代碼 new Particleground.particle('#demo') 就能夠實現啦。

• 而後就是「潔」：這個須要閱讀源碼咯，相信從源碼中你會看到代碼的簡潔優雅的，具體請戳這裏啦~

• 固然，特效也是簡潔美觀的啦，對不起視覺的效果爲何還要用代碼去實現它呢...

高效：

• 在做者的能力基礎之上，代碼能優化的地方做者都想盡了方法去優化它(包括性能的優化，代碼的簡化)。

• 好比：this關鍵字的在另外一個函數內儲存成變量參數使用，屢次使用到的深度屬性或方法儲存成變量使用，既達到壓縮時可減小體積，又達到減小變量查找的耗時。

• 好比：粒子無序運動的連線功能處理，嵌套for循環，O(n²)的問題，做者優化了三次(git commit有記錄咯)，最後使用(學習借鑑)了《HTML5+JavaScript動畫基礎》這本書的一個思想和優化方式，達到既不冗餘代碼或佔用內存，又提高了一倍的執行效率。具體可點擊這裏，源碼第160行哦。

輕量級：

• 因爲前面說到的兩點，輕量級天然就孕育而生啦。

• 另外一個就是特效之間都是以獨立的插件形式使用的，不存在相互依賴的問題，只依賴一個公共的功能文件，這樣就能夠達到想加載什麼就加載什麼，按需加載的不臃腫體驗啦，也能夠偷懶直接使用包含全部特效的壓縮包文件咯。

五：最後

• 一個良好的官網及文檔是一個良好的開始，插件庫官網：particleground.duapp.com, 先用着這個域名咯，等時機成熟了，再換回正式的 pjs.barrior.me 域名~

• 貢獻老是受歡迎的，不管它多麼大或小！只要你與做者的觀念，理念，志同道合的話，那就太但願你加入組織的懷抱啦，作一件本身喜歡的事，作一個本身都喜歡本身的人。

• 若是你喜歡這個插件庫並能幫助到你的實際工做中，但願它能發展的更好，提供更多有趣實用的特效，支持我(們)，煩請點個 Star 吧。