超简单自定义粒子背景动画插件(原创)

 查看演示  website  立即下载

更新时间：2019/5/31 下午3:01:43

更新说明：新增自定义粒子个数，粒子生成速率参数改变，新增粒子移动速度参数，新增粒子生成大小模式控制，新增4种内置动画效果，新增动画模式（平移，离散），新增边界控制

更新内容

1：新增自定义粒子个数

现在可以实现自定义粒子个数了

在control: "auto"时，可以设置

autoCustom: true, //自定义auto模式，只在control: "auto"有效
autoCustomNum: 100, //自定义粒子个数，只在control: "auto"有效

在开启这种模式后，粒子生成的个数就完全受您控制了，同时，在这种模式下，粒子的衰减速率也可以设置为0了，如下

size: [10, 0, false]

2：粒子生成速率参数改变，新增粒子移动速度参数

在老版本中，speed参数是用来控制粒子的生成速率，数值越大，粒子生成越慢，在新的版本中，生成速率的参数被我们换成了这个

interval_time：1

而原来的speed参数我们也没有废弃，我们给了它新的任务，speed参数现在可以用来控制粒子的移动速度

speed: 10

数值越大，粒子移动的速度越快

3：新增粒子生成大小模式控制

在原本的粒子初始大小设置中，我们添加了一个新的控制，用来控制粒子的初始大小生成是否为随机的，随机范围是1<=粒子随机大小<=粒子初始大小

size: [10, 0, false],
size:[粒子初始大小，粒子衰减速率，是否开启粒子随机大小]；

第三个参数为true时开启，为false时，粒子则以初始大小生成

4：新增4种内置动画效果

在新的版本中，我们给这个插件又设置了新的运动方向动画

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

animation_type: {
    type: 8, //动画类型（向右下运动）
    Israndom: true //开启离散效果
},

当Israndom: true时，离散模式开启，粒子会向动画方向的垂直方向离散，比如说,当

animation_type: {
    type: 1, //动画类型（向左运动）
    Israndom: true //开启离散效果
},

时，粒子运动方向为左，开启离散后，粒子在向左运动的同时，还会向上和下运动，这样粒子就可以在左边180度的范围随机扩散了

当Israndom: false时，粒子运动将不再离散，粒子会在运动方向直线走

6：新增边界控制

在新的版本中，我们可以粒子运动进行边界控制了

IsboundaryControl: true

控制开启后，粒子在移动到画布边缘时，会被反弹而回，想象下在一个玻璃缸里的弹力球，大致就是那样

建议在

control: "auto"，
autoCustom: true, //自定义auto模式，只在control: "auto"有效
autoCustomNum: 100, //自定义粒子个数，只在control: "auto"有效

中使用，限制粒子生成的个数

这样就可以避免粒子生成过多，导致浏览器卡顿的状况

同时，你也可以设置

size: [10, 0, false],

把粒子的衰减速率设置为0，

这样就不会遇到粒子动画进行的时候，粒子衰减完了的情况

发布时间：2019-05-29 22:39:47

使用方法

使用该插件前。您需要知道，该插件时基于jQuery框架实现的，您需要引入2.0以上版本的jQuery框架

cdn：

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

接下来再引入我们的粒子动画插件particle.js

<script src="js/particle.js" type="text/javascript" charset="utf-8"></script>

html部分

<canvas width="" height="" ></canvas>

css部分

完全自定义

js部分

当您只是想要一个全屏的粒子背景，可以这样做（您最好将浏览器的滑动条关掉，滑动条会占用部分屏宽，会使画布无法完全全屏）

var c = new Cbg({
    container: ".canvas",//绑定Canvas画布
})

如果想要限制粒子背景的宽高，您可以这样做

var c = new Cbg({
container: ".canvas",//绑定Canvas画布
    width: 100,//单位px
    height: 100,
})

生成的粒子初始大小为10px,而且会经过动画的进行不断的缩小，如下

var c = new Cbg({
    container: ".canvas",//绑定Canvas画布
   size: [10, 0.2]//  size: [粒子大小,粒子尺寸衰减速率（数值越大，尺寸缩减越快，反之越慢，最小不得小于0.01）]
})

该插件一共有三种控制方式

无控制随机动画

var c = new Cbg({
    container: ".canvas",//绑定Canvas画布
    control: "auto",//随机生成动画，默认无控制
})

鼠标跟随动画

var c = new Cbg({
    container: ".canvas",//绑定Canvas画布
   control: "mouse",//鼠标跟随动画
})

固定中心坐标动画，坐标位置即为粒子生成的初始位置

var c = new Cbg({
    container: ".canvas",//绑定Canvas画布
    control: "coordinate",//坐标点控制
    x: 500,//单位px
    y: 500
})

该插件可以生成颜色粒子，也可以生成图片粒子，可以用来做雪花飘落之类的特效

生成颜色粒子（单色）

var c = new Cbg({
    container: ".canvas",//绑定Canvas画布
    type: "color",
    color: "red" //只设置一个颜色
})

生成颜色粒子（多色随机）

var c = new Cbg({
   container: ".canvas",//绑定Canvas画布
    type: "color",
    color: ["#6525EE", "#007AFF", "orange", "orangered"] //设置多个颜色，随机刷新
})

生成图片粒子，图片比例1：1

生成图片（单个图片）

var c = new Cbg({
    container: ".canvas",//绑定Canvas画布
    type: "img",
    imgUrl: "图片路径",//只设置一个图片
})

生成图片（多个图片，随机刷新）

var c = new Cbg({
    container: ".canvas",//绑定Canvas画布
    type: "img",
    imgUrl: ["图片路径", "图片路径"，....],//设置多个图片，随机刷新
})

在此插件中，粒子的生成速率是可控的

var c = new Cbg({
    container: ".canvas",//绑定Canvas画布
   control: "auto",//随机生成动画，默认无控制
   speed: 10, //数值越大，粒子生成越慢，数值越小，生成的越快，最小值1
})

需要注意的是，在

control: "mouse",//鼠标跟随动画

中，speed是不生效的，因为在鼠标控制下，粒子生成速度取决于您的手速，鼠标移动越快，生成越快

在该插件中，我们内置了5种粒子移动方向，可用于不同的场景

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参数为全局参数，对三种控制方式的动画都可进行设置

此插件后期还会添加更多的效果，欢迎大家提供宝贵的建议

PREVIOUS:
NEXT:
swiper实现的滑块
jQuery内容滚动插件Sly