v1.1.0

DEV_DOC.md

@@ -9,12 +9,12 @@
 
 ## 流程
 
-##### 1、运行命令： `npm start` 或 `gulp pack-pjs`
+##### 1、运行命令： `npm run dev` 或 `gulp pack-pjs`
 监听`dev/pjs`下js文件的改变，打包出`particleground.all.js`文件。
 
 ##### 2、在`test`文件夹下找到相应的html页面，预览开发。
 还没用到单元测试，惭愧啊。
 
-*3、修改`package.json`的版本号，运行命令：`gulp build-prod`
+*3、修改`package.json`的版本号，运行命令：`npm run prod` 或 `gulp build-prod`
 将完成好的作品，压缩到production目录。*
 

README.md

@@ -1,4 +1,5 @@
 # Particleground.js
+[![npm version](https://badge.fury.io/js/Particleground.js.svg)](https://badge.fury.io/js/Particleground.js)
 
 官网：[http://particleground.duapp.com/](http://particleground.duapp.com/)
 

changelog.js

@@ -0,0 +1,37 @@
+module.exports = [
+    {
+        version: '1.1.0',
+        date: '2016.10.31',
+        feature: [
+            '增加最大最小速度(maxSpeed, minSpeed)，删除原有只是表示最大速度(speed)的API'
+        ],
+        bugs: [
+            '修改最大最小半径API名称',
+            '修改粒子特效距离(dis)API名称为全称(distance)'
+        ]
+    },
+    {
+        version: '1.0.1',
+        date: '2016.10.16',
+        bugs: [
+            '修复IE9以下浏览器报错'
+        ]
+    },
+    {
+        version: '1.0.0',
+        date: '2016.10.14',
+        description: [
+            'Particleground.js v1.0.0 诞生啦!',
+            '提供粒子无序运动，波浪运动，雪花飘落三种特效！'
+        ],
+
+        // 新特性
+        feature: [],
+
+        // 功能优化
+        optimizing: [],
+
+        // 问题修正
+        bugs: []
+    }
+];

dev/pjs/particle.js

@@ -30,18 +30,20 @@
     }
 
     Particle.defaultConfig = {
-        // 粒子运动速度
-        speed: 1,
         // 粒子个数，默认为容器宽度的0.12倍
         // 传入(0, 1)显示容器宽度相应倍数的个数，传入[1, +∞)显示具体个数
         num: .12,
-        // 粒子最大半径
-        max: 2.4,
-        // 粒子最小半径
-        min: .6,
+        // 粒子最大半径(0, +∞)
+        maxR: 2.4,
+        // 粒子最小半径(0, +∞)
+        minR: .6,
+        // 粒子最大运动速度(0, +∞)
+        maxSpeed: 1,
+        // 粒子最小运动速度(0, +∞)
+        minSpeed: 0,
         // 两点连线的最大值
-        // 在range范围内的两点距离小于dis，则两点之间连线
-        dis: 130,
+        // 在range范围内的两点距离小于distance，则两点之间连线
+        distance: 130,
         // 线段的宽度
         lineWidth: .2,
         // 定位点的范围，范围越大连线越多，当range等于0时，不连线，相关值无效
@@ -51,7 +53,7 @@
     };
 
     var fn = Particle.prototype = {
-        version: '1.0.0',
+        version: '1.1.0',
         init: function(){
             if( this.set.num > 0 ){
                 if( this.set.range > 0 ){
@@ -77,20 +79,22 @@
                 set = this.set,
                 color = this.color,
                 limitRandom = util.limitRandom,
-                speed = set.speed,
-                max = set.max,
-                min = set.min,
+                calcSpeed = util.calcSpeed,
+                maxSpeed = set.maxSpeed,
+                minSpeed = set.minSpeed,
+                maxR = set.maxR,
+                minR = set.minR,
                 num = util.pInt( util.scaleValue( set.num, cw ) ),
                 dots = [], r;
 
             while ( num-- ){
-                r = limitRandom( max, min );
+                r = limitRandom( maxR, minR );
                 dots.push({
                     x: limitRandom( cw - r, r ),
                     y: limitRandom( ch - r, r ),
                     r: r,
-                    vx: limitRandom( speed, -speed * .5 ) || speed,
-                    vy: limitRandom( speed, -speed * .5 ) || speed,
+                    vx: calcSpeed( maxSpeed, minSpeed ),
+                    vy: calcSpeed( maxSpeed, minSpeed ),
                     color: color()
                 });
             }
@@ -150,7 +154,7 @@
         connectDots:function(){
             var cxt = this.cxt,
                 set = this.set,
-                dis = set.dis,
+                dis = set.distance,
                 posX = this.posX,
                 posY = this.posY,
                 posR = set.range,

dev/pjs/particleground.all.js

@@ -69,7 +69,7 @@
      * @returns {number}
      */
 	function limitRandom( max, min ){
-		return random() * ( max - min ) + min;
+		return max === min ? max : (random() * (max - min) + min);
 	}
 
     /**
@@ -224,6 +224,16 @@
         return val > 0 && val < 1 ? scale * val : val;
     }
 
+    /**
+     * 计算速度值
+     * @param max {number}
+     * @param min {number}
+     * @returns {number}
+     */
+    function calcSpeed(max, min){
+        return (limitRandom( max, min ) || max) * (random() > .5 ? 1 : -1);
+    }
+
     /**
      * 设置color函数
      * @param color {string|array} 颜色数组
@@ -334,6 +344,7 @@
         offset: offset,
         createCanvas: createCanvas,
         scaleValue: scaleValue,
+        calcSpeed: calcSpeed,
         setColor: setColor,
         pause: pause,
         open: open,
@@ -342,7 +353,7 @@
     };
 
     var Particleground = {
-        version: '1.0.1',
+        version: '1.1.0',
         canvasSupport: canvasSupport,
         commonConfig: {
             // 画布全局透明度
@@ -420,18 +431,20 @@
     }
 
     Particle.defaultConfig = {
-        // 粒子运动速度
-        speed: 1,
         // 粒子个数，默认为容器宽度的0.12倍
         // 传入(0, 1)显示容器宽度相应倍数的个数，传入[1, +∞)显示具体个数
         num: .12,
-        // 粒子最大半径
-        max: 2.4,
-        // 粒子最小半径
-        min: .6,
+        // 粒子最大半径(0, +∞)
+        maxR: 2.4,
+        // 粒子最小半径(0, +∞)
+        minR: .6,
+        // 粒子最大运动速度(0, +∞)
+        maxSpeed: 1,
+        // 粒子最小运动速度(0, +∞)
+        minSpeed: 0,
         // 两点连线的最大值
-        // 在range范围内的两点距离小于dis，则两点之间连线
-        dis: 130,
+        // 在range范围内的两点距离小于distance，则两点之间连线
+        distance: 130,
         // 线段的宽度
         lineWidth: .2,
         // 定位点的范围，范围越大连线越多，当range等于0时，不连线，相关值无效
@@ -441,7 +454,7 @@
     };
 
     var fn = Particle.prototype = {
-        version: '1.0.0',
+        version: '1.1.0',
         init: function(){
             if( this.set.num > 0 ){
                 if( this.set.range > 0 ){
@@ -467,20 +480,22 @@
                 set = this.set,
                 color = this.color,
                 limitRandom = util.limitRandom,
-                speed = set.speed,
-                max = set.max,
-                min = set.min,
+                calcSpeed = util.calcSpeed,
+                maxSpeed = set.maxSpeed,
+                minSpeed = set.minSpeed,
+                maxR = set.maxR,
+                minR = set.minR,
                 num = util.pInt( util.scaleValue( set.num, cw ) ),
                 dots = [], r;
 
             while ( num-- ){
-                r = limitRandom( max, min );
+                r = limitRandom( maxR, minR );
                 dots.push({
                     x: limitRandom( cw - r, r ),
                     y: limitRandom( ch - r, r ),
                     r: r,
-                    vx: limitRandom( speed, -speed * .5 ) || speed,
-                    vy: limitRandom( speed, -speed * .5 ) || speed,
+                    vx: calcSpeed( maxSpeed, minSpeed ),
+                    vy: calcSpeed( maxSpeed, minSpeed ),
                     color: color()
                 });
             }
@@ -540,7 +555,7 @@
         connectDots:function(){
             var cxt = this.cxt,
                 set = this.set,
-                dis = set.dis,
+                dis = set.distance,
                 posX = this.posX,
                 posY = this.posY,
                 posR = set.range,
@@ -644,6 +659,7 @@
 
     var util = Particleground.util,
         random = Math.random,
+        abs = Math.abs,
         pi2 = Math.PI * 2;
 
     function Snow( selector, options ){
@@ -653,35 +669,35 @@
     Snow.defaultConfig = {
         // 雪花颜色
         color: '#fff',
-        // 雪花最大半径
-        max: 6.5,
-        // 雪花最小半径
-        min: .4,
-        // 运动速度
-        speed: .4
+        maxR: 6.5,
+        minR: .4,
+        maxSpeed: .6,
+        minSpeed: 0
     };
 
     var fn = Snow.prototype = {
-        version: '1.0.0',
+        version: '1.1.0',
         init: function(){
             this.dots = [];
             this.createDots();
             this.draw();
             this.resize();
         },
         snowShape: function(){
-            var color = this.color,
-                cw = this.cw,
-                set = this.set,
-                speed = set.speed,
-                r = util.limitRandom( set.max, set.min );
+            var set = this.set,
+                calcSpeed = util.calcSpeed,
+                maxSpeed = set.maxSpeed,
+                minSpeed = set.minSpeed,
+                r = util.limitRandom( set.maxR, set.minR );
             return {
-                x: random() * cw,
+                x: random() * this.cw,
                 y: -r,
                 r: r,
-                vx: random() || .4,
-                vy: r * speed,
-                color: color()
+                vx: calcSpeed( maxSpeed, minSpeed ),
+
+                // r 越大，设置垂直速度越快，这样比较有近快远慢的层次效果
+                vy: abs( r * calcSpeed( maxSpeed, minSpeed ) ),
+                color: this.color()
             };
         },
         createDots: function(){

dev/pjs/particleground.js

@@ -69,7 +69,7 @@
      * @returns {number}
      */
 	function limitRandom( max, min ){
-		return random() * ( max - min ) + min;
+		return max === min ? max : (random() * (max - min) + min);
 	}
 
     /**
@@ -224,6 +224,16 @@
         return val > 0 && val < 1 ? scale * val : val;
     }
 
+    /**
+     * 计算速度值
+     * @param max {number}
+     * @param min {number}
+     * @returns {number}
+     */
+    function calcSpeed(max, min){
+        return (limitRandom( max, min ) || max) * (random() > .5 ? 1 : -1);
+    }
+
     /**
      * 设置color函数
      * @param color {string|array} 颜色数组
@@ -334,6 +344,7 @@
         offset: offset,
         createCanvas: createCanvas,
         scaleValue: scaleValue,
+        calcSpeed: calcSpeed,
         setColor: setColor,
         pause: pause,
         open: open,
@@ -342,7 +353,7 @@
     };
 
     var Particleground = {
-        version: '1.0.1',
+        version: '1.1.0',
         canvasSupport: canvasSupport,
         commonConfig: {
             // 画布全局透明度