手把手教你系列 - Particle粒子特效（下）

本着瞎折腾的学习态度，在闲暇之余就是要搞点奇奇怪怪的事情。文中如有哪不对的地方，还请大家指出。本文项目github地址：https://github.com/SmallStoneSK/particle-effect

---

回顾

在上一篇文章中，我们简单地介绍了如何利用canvas来实现Particle粒子特效。通过把动画看作是不断地重复clear(), paint()这两步，我们只要把精力更多地关注在如何绘制每一帧画面即可。因此在上篇文章中，我们着重介绍了如何绘制画布上的运动中的粒子、粒子间的连线、以及粒子和鼠标的交互。那么在接下来的这篇文章中，我们将介绍如何优化、完善、改进现有的代码。其中，主要包括以下内容：

• 粒子动效的参数可配置化
• canvas自适应窗口大小
• requestAnimationFrame代替setInterval
• 缓存windowSize

---

粒子动效的参数可配置化

在之前的代码中，我们将粒子的一些属性都直接用硬编码写死了。如果要将这个ParticleEffect.js做成插件给别人用的话，其他人岂不是还要先看懂我们的代码？所以，我们需要把其中一些可配置的参数暴露出来，做到参数可配置化，方便使用的人自己定制想要的效果。

需要注意的是，我们需要有一个自己的默认保底配置。也就是说，如果用户没有传相应的配置时，粒子特效也能正常运行。而当用户配置了相应的参数时，我们就应该以新的配置为准。话不多说，具体实现看下面代码：

var ParticleEffect = {
    // ... 省去其他代码
    config: {
        count: 100,                     // 默认创建粒子数量
        radius: 5,                      // 默认粒子半径
        vxRange: [-1, 1],               // 默认粒子横向移动速度范围
        vyRange: [-1, 1],               // 默认粒子纵向移动速度范围
        scaleRange: [.5, 1],            // 默认粒子缩放比例范围
        lineLenThreshold: 125,          // 默认连线长度阈值
        color: 'rgba(255,255,255,.2)'   // 默认粒子、线条的颜色
    }，
    init: function() {
   

        // ... 省去其他代码

        // 更新config配置
        var _this = this;
        newConfig && Object.keys(newConfig).forEach(function(key) {
   
            _this.config[key] = newConfig[key];
        });

        // 生成粒子
        var times = this.config.count;
        this.particles = [];
        while(times--) {
            this.particles.push(new Particle({
                x: Utils.rangeRandom(this.config.radius, windowSize.width - this.config.radius),
                y: Utils.rangeRandom(this.config.radius, windowSize.height - this.config.radius),
                vx: Utils.rangeRandom(this.config.vxRange[0], this.config.vxRange[1]),
                vy: Utils.rangeRandom(this.config.vyRange[0], this.config.vyRange[