更新时间：2019/5/31 下午3:01:43
更新说明：新增自定义粒子个数，粒子生成速率参数改变，新增粒子移动速度参数，新增粒子生成大小模式控制，新增4种内置动画效果，新增动画模式（平移，离散），新增边界控制
更新内容
1：新增自定义粒子个数
现在可以实现自定义粒子个数了
在control: "auto"时，可以设置
1 2 | autoCustom: true, //自定义auto模式，只在control: "auto"有效autoCustomNum: 100, //自定义粒子个数，只在control: "auto"有效 |
在开启这种模式后，粒子生成的个数就完全受您控制了，同时，在这种模式下，粒子的衰减速率也可以设置为0了，如下
1 | size: [10, 0, false] |
2：粒子生成速率参数改变，新增粒子移动速度参数
在老版本中，speed参数是用来控制粒子的生成速率，数值越大，粒子生成越慢，在新的版本中，生成速率的参数被我们换成了这个
1 | interval_time：1 |
而原来的speed参数我们也没有废弃，我们给了它新的任务，speed参数现在可以用来控制粒子的移动速度
1 | speed: 10 |
数值越大，粒子移动的速度越快
3：新增粒子生成大小模式控制
在原本的粒子初始大小设置中，我们添加了一个新的控制，用来控制粒子的初始大小生成是否为随机的，随机范围是1<=粒子随机大小<=粒子初始大小
1 2 | size: [10, 0, false],size:[粒子初始大小，粒子衰减速率，是否开启粒子随机大小]； |
第三个参数为true时开启，为false时，粒子则以初始大小生成
4：新增4种内置动画效果
在新的版本中，我们给这个插件又设置了新的运动方向动画
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | animation_type: { type: 5, //动画类型（向左上运动） Israndom: true //开启离散效果},animation_type: { type: 6, //动画类型（向左下运动） Israndom: true //开启离散效果},animation_type: { type: 7, //动画类型（向右上运动） Israndom: true //开启离散效果},animation_type: { type: 8, //动画类型（向右下运动） Israndom: true //开启离散效果}, |
5：新增动画模式（平移，离散）
在原本的animation_type参数中，我们添加了新的属性Israndom: true
1 2 3 4 | animation_type: { type: 8, //动画类型（向右下运动） Israndom: true //开启离散效果}, |
当Israndom: true时，离散模式开启，粒子会向动画方向的垂直方向离散，比如说,当
1 2 3 4 | animation_type: { type: 1, //动画类型（向左运动） Israndom: true //开启离散效果}, |
时，粒子运动方向为左，开启离散后，粒子在向左运动的同时，还会向上和下运动，这样粒子就可以在左边180度的范围随机扩散了
当Israndom: false时，粒子运动将不再离散，粒子会在运动方向直线走
6：新增边界控制
在新的版本中，我们可以粒子运动进行边界控制了
1 | IsboundaryControl: true |
控制开启后，粒子在移动到画布边缘时，会被反弹而回，想象下在一个玻璃缸里的弹力球，大致就是那样
建议在
1 2 3 | control: "auto"，autoCustom: true, //自定义auto模式，只在control: "auto"有效autoCustomNum: 100, //自定义粒子个数，只在control: "auto"有效 |
中使用，限制粒子生成的个数
这样就可以避免粒子生成过多，导致浏览器卡顿的状况
同时，你也可以设置
1 | size: [10, 0, false], |
把粒子的衰减速率设置为0，
这样就不会遇到粒子动画进行的时候，粒子衰减完了的情况
发布时间：2019-05-29 22:39:47
使用方法
使用该插件前。您需要知道，该插件时基于jQuery框架实现的，您需要引入2.0以上版本的jQuery框架
cdn：
1 |
接下来再引入我们的粒子动画插件particle.js
1 | <script src="js/particle.js" type="text/javascript" charset="utf-8"></script> |
html部分
1 | <canvas width="" height="" ></canvas> |
css部分
完全自定义
js部分
当您只是想要一个全屏的粒子背景，可以这样做（您最好将浏览器的滑动条关掉，滑动条会占用部分屏宽，会使画布无法完全全屏）
1 2 3 | var c = new Cbg({ container: ".canvas",//绑定Canvas画布}) |
如果想要限制粒子背景的宽高，您可以这样做
1 2 3 4 5 | var c = new Cbg({container: ".canvas",//绑定Canvas画布 width: 100,//单位px height: 100,}) |
生成的粒子初始大小为10px,而且会经过动画的进行不断的缩小，如下
1 2 3 4 | var c = new Cbg({ container: ".canvas",//绑定Canvas画布 size: [10, 0.2]// size: [粒子大小,粒子尺寸衰减速率（数值越大，尺寸缩减越快，反之越慢，最小不得小于0.01）]}) |
该插件一共有三种控制方式
无控制随机动画
1 2 3 4 | var c = new Cbg({ container: ".canvas",//绑定Canvas画布 control: "auto",//随机生成动画，默认无控制}) |
鼠标跟随动画
1 2 3 4 | var c = new Cbg({ container: ".canvas",//绑定Canvas画布 control: "mouse",//鼠标跟随动画}) |
固定中心坐标动画，坐标位置即为粒子生成的初始位置
1 2 3 4 5 6 | var c = new Cbg({ container: ".canvas",//绑定Canvas画布 control: "coordinate",//坐标点控制 x: 500,//单位px y: 500}) |
该插件可以生成颜色粒子，也可以生成图片粒子，可以用来做雪花飘落之类的特效
生成颜色粒子（单色）
1 2 3 4 5 | var c = new Cbg({ container: ".canvas",//绑定Canvas画布 type: "color", color: "red" //只设置一个颜色}) |
生成颜色粒子（多色随机）
1 2 3 4 5 | var c = new Cbg({ container: ".canvas",//绑定Canvas画布 type: "color", color: ["#6525EE", "#007AFF", "orange", "orangered"] //设置多个颜色，随机刷新}) |
生成图片粒子，图片比例1：1
生成图片（单个图片）
1 2 3 4 5 | var c = new Cbg({ container: ".canvas",//绑定Canvas画布 type: "img", imgUrl: "图片路径",//只设置一个图片}) |
生成图片（多个图片，随机刷新）
1 2 3 4 5 | var c = new Cbg({ container: ".canvas",//绑定Canvas画布 type: "img", imgUrl: ["图片路径", "图片路径"，....],//设置多个图片，随机刷新}) |
在此插件中，粒子的生成速率是可控的
1 2 3 4 5 | var c = new Cbg({ container: ".canvas",//绑定Canvas画布 control: "auto",//随机生成动画，默认无控制 speed: 10, //数值越大，粒子生成越慢，数值越小，生成的越快，最小值1}) |
需要注意的是，在
1 | control: "mouse",//鼠标跟随动画 |
中，speed是不生效的，因为在鼠标控制下，粒子生成速度取决于您的手速，鼠标移动越快，生成越快
在该插件中，我们内置了5种粒子移动方向，可用于不同的场景
1 2 3 4 5 6 7 8 9 10 11 | var c = new Cbg({container: ".canvas",//绑定Canvas画布 control: "auto",//随机生成动画，默认无控制 speed: 10, animation_type: 0,//（默认动画，随机方位，随机方向）})//animation_type: 0（默认动画，随机方位，随机方向）//animation_type: 1（向左运动）//animation_type: 2（向右运动）//animation_type: 3（向下运动）//animation_type: 4（向上运动） |
animation_type参数为全局参数，对三种控制方式的动画都可进行设置
此插件后期还会添加更多的效果，欢迎大家提供宝贵的建议
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery内容滚动插件Sly
- 下一个特效： swiper实现的滑块