JParticles 3.0 released. 🥳 讓 loading 動畫更具吸引力與品牌化

先來個引子吧：JParticles（JavaScript Particles 的縮寫）是一款基於 Canvas 的不依賴於其餘庫的輕量級 JavaScript 粒子運動特效庫。提供一些比較絢麗、實用的特效應用於 WEB 界面，但願能達到錦上添花的做用，給用戶帶來些許驚喜。

做爲一個更新稍加不快的開源項目，JParticles 發佈 3.0 了喲，主要更新的點以下：

• 支持遮罩功能（Mask）可用於自定義 Logo。
• 全面支持 TypeScript，由於 3.0 採用了 TS 完全重構。
• 新增線條動畫特效，也許在特定場景能夠起到點綴的做用吧。
• 改善了一些 API 的命名，爲了讓 API 更容易理解，儘可能避免語義分歧。
• 其餘一些細節功能的改進或加強。

下面咱們先來瞅瞅新增的遮罩功能帶來的酷酷的效果吧。

常規遮罩（Mask）

常規遮罩最適用於純文字的 Logo，像 GitHub 的文字 Logo 就很棒，看看噻：

代碼很簡潔，只須要在 mask 字段上設置 Logo 圖片地址就好了：

new JParticles.Wave('#demo', {
    num: 1,
    fillColor: '#14c8ff',
    crestHeight: 8,
    offsetTop: 0.5,
    crestCount: 2,
    fill: true,
    line: false,
    speed: 0.1,
    // 遮罩設置爲 Logo 圖片地址
    mask: 'https://raw.githubusercontent.com/Barrior/assets/main/github-logo-text.svg',
})

小提示：SVG 可使圖片在 Mac OS 等多倍屏幕的顯示下依然清晰，推薦。

在線編輯代碼，體驗效果：https://codepen.io/barrior/pe...

幽靈遮罩（Ghost Mask）

感受也許這個名字可能適合吧「苦笑臉.jpg」。
幽靈遮罩（Ghost Mask）：灰度化遮罩圖片做爲背景，再裁剪出原始彩色圖案。
該遮罩最適用於彩色的圖像的 Logo，像 Chrome 的 Logo 使用該加載效果就看起來特別棒了：

代碼很簡潔，只須要改變遮罩模式便可：

new JParticles.Wave('#demo', {
    num: 2,
    line: false,
    fill: true,
    fillColor: 'rgba(0, 0, 0, 0.15)',
    offsetTop: 0.5,
    offsetLeft: [0, 1.5],
    crestHeight: 5,
    crestCount: 2,
    speed: 0.2,
    // 設置遮罩圖片
    mask: 'https://raw.githubusercontent.com/Barrior/assets/main/chrome-logo.svg',
    // 設置遮罩模式爲「幽靈模式」
    maskMode: 'ghost'
})

在線編輯代碼，體驗效果：https://codepen.io/barrior/pen/GRrperm

WaveLoading 的遮罩（模擬加載進度）

Wave 是單純的效果，適用於展現實際進度值，而 WaveLoading 則是對它的封裝，用於平常的模擬進度的加載。

看看幽靈模式下的模擬加載是什麼效果吧：

代碼以下：

new JParticles.WaveLoading('#demo', {
    // Wave 效果的參數
    num: 2,
    fillColor: 'rgba(0, 0, 0, 0.15)',
    offsetLeft: [0, 1.5],
    crestHeight: 5,
    crestCount: 2,
    speed: 0.22,
    mask: 'https://raw.githubusercontent.com/Barrior/assets/main/chrome-logo.svg',
    maskMode: 'ghost',

    // WaveLoading 特有的加載進度的參數
    textColor: '#fff',  // 進度文本顏色
    textFormatter: '加載中...%d%',  // 進度文本模板
    duration: 8000,  // 進度持續時長
})

在線編輯代碼，體驗效果：https://codepen.io/barrior/pen/WNRQWVr

新增的線條動畫特效

如同更新日誌所述，也許在特定場景能夠起到點綴的做用吧，效果示例：

代碼以下：

new JParticles.Line('#demo', {
    // 最大傾斜角度
    maxDegree: 70,
    // 最小傾斜角度
    minDegree: 70,
})

在線編輯代碼，體驗效果：https://codepen.io/barrior/pen/WNRQqXK

最後

• 以上全部效果的文檔均可以在官網找到：https://jparticles.js.org（站點託管於 GitHub，若是訪問慢建議使用**），除此以外還支持「粒子運動」、「雪花飄落」等動畫特效哦~
• 讓 loading 動畫更具吸引力與品牌化，嗯...說的就是 Wave 和 WaveLoading 效果了。
• 若是您喜歡 JParticles，煩請點個贊吧（Star on GitHub），不勝榮幸與感謝~