先来个引子吧：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 等多倍屏幕的显示下依然清晰，推荐。
在线编辑代码，体验效果：codepen.io/barrior/pen…
幽灵遮罩（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'
})
在线编辑代码，体验效果：codepen.io/barrior/pen…
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, // 进度持续时长
})
在线编辑代码，体验效果：codepen.io/barrior/pen…
新增的线条动画特效
如同更新日志所述，也许在特定场景可以起到点缀的作用吧，效果示例：
代码如下：
new JParticles.Line('#demo', {
// 最大倾斜角度
maxDegree: 70,
// 最小倾斜角度
minDegree: 70,
})
在线编辑代码，体验效果：codepen.io/barrior/pen…
最后
- 以上所有效果的文档都可以在官网找到：jparticles.js.org （站点托管于 GitHub，如果访问慢建议使用 VPN），除此之外还支持「粒子运动」、「雪花飘落」等动画特效哦~
- 让 loading 动画更具吸引力与品牌化，嗯...说的就是 Wave 和 WaveLoading 效果了。
- 如果您喜欢 JParticles，烦请点个赞吧（Star on GitHub），不胜荣幸与感谢~
