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），不胜荣幸与感谢~