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

所属分类:其他-动画效果

 20330  226  查看评论 (3)
分享到微信朋友圈
X
超简单自定义粒子背景动画插件(原创) ie兼容10

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

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

相关插件-动画效果

3D标签云滚动插件

3D标签云,小修改气泡云随着鼠标方向滚动
  动画效果
 26486  301

导航水波纹点击效果外加滑动效果

导航水波纹点击效果外加滑动效果
  动画效果
 28051  341

Google Doodle粘土动画

Google Doodle粘土动画
  动画效果
 26375  297

粒子动画插件particle.js

炫酷的粒子动画,代码注释全方便修改
  动画效果
 30103  267

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ldwsm 0
    2019/5/31 11:45:39

    很好,对我帮助很大,谢谢!

        ?风殇?雪霁?0
        2019/5/31 15:06:15
        新的版本也更新了,新增了很多实用的功能,欢迎下载使用
        ?风殇?雪霁?0
        2019/5/31 15:07:48
        这个插件是比较灵活的,参数的不同搭配可以实现很多的效果
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复