js点击按钮动画粒子特效

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

 7043  133  查看评论 (10)
js点击按钮动画粒子特效 ie兼容12

这是一款js点击按钮动画粒子特效。该特效在点击按钮时,按钮会以各种粒子分解的方式进行隐藏,点击重放按钮后,又会以粒子组合的方式重新组装成一个按钮,非常炫酷。

该js点击按钮动画粒子特效共有12种不同的粒子动画特效,动画使用anime.js来制作。

使用方法

在页面中引入anime.min.js和particles.min.js文件。

<script src='js/anime.min.js'></script>
<script src='js/particles.js'></script>

HTML结构

在页面中插入一个按钮。

<button >Button</button>

初始化插件

然后会通过下面的方法来初始化该js点击按钮动画粒子特效

// Initialize a new instance of Particles to disintegrate/integrate the button
var particles = new Particles('.button');
// Disintegrate the button into particles
particles.disintegrate();
// particles.integrate(); // would do the opposite

配置参数

particles.min.js插件允许我们设置配置参数,可用的配置参数如下:

参数            类型            默认值            描述            
canvasPaddingInteger150在目标元素上生成的canvas的偏移值。canvasPadding = 0表示生成的canvas和目标元素重合。
durationInteger1000粒子动画的持续时间,单位毫秒。
easingString/FunctioneaseInOutCubic粒子动画的easing效果。由anime.js传入。
typeStringcircle粒子的类型,可以是以下三种类型:circle,rectangle, triangle。
styleStringfill粒子的样式,可以是:fill,stroke。
directionStringleft目标元素开始分解为粒子的起始方向,可以是:left, right top, bottom。相反的方向用于执行合成操作。
sizeFloat/Function从1-4的随机数粒子的大小,单位像素。
speedFloat/Function-2到2的随机数粒子移动多少像素每帧。
colorString目标元素的背景颜色粒子的填充颜色。
particlesAmountCoefficientFloat3计算粒子数量的系数。particlesAmountCoefficient = 0的结果是生成0个粒子,数值越大,产生的粒子越多。
oscillationCoefficient            Float20计算粒子动画是振荡浮动的系数。oscilationCoefficient = 0表示粒子不振荡,值越大,里振荡幅度越大。
beginFunctionundefined            开始执行粒子动画前的回调函数。
completeFunctionundefined            执行粒子动画结束后的回调函数。
相关插件-动画效果

canvas烟花效果

2018新年快乐烟花效果
  动画效果
 6965  82

jQuery直播点击飘心效果,点赞桃心飘动效果

直播点击飘心效果,点赞桃心飘动效果,canvas画出桃心飘动效果
  动画效果
 6527  41

纯css仿qq浏览器官网的彗星

仿qq浏览器官网的彗星,纯css
  动画效果
 12604  118

超炫背景粒子效果

超炫背景粒子效果
  动画效果
 21084  259

讨论这个项目(10)回答他人问题或分享插件使用方法奖励jQ币

    走着瞧, 0
    2018/5/24 17:30:24
    还是不懂 感觉样式没跟上 回复
    0
    2018/5/22 9:10:58
    你还是留个官网地址吧
        RootSeeker0
        2018/5/22 10:06:14
        有必要?看到particles.js就知道怎么回事了
        RootSeeker0
        2018/5/22 10:07:14
        particles.js
        去百度吧,使用方法第一步就写了
    回复
    长风何归 0
    2018/5/18 20:22:59
    秦时明月? 0
    2018/5/18 9:29:29
    效果确实??的 希望以后能用上 回复
    爱死寂寞人 0
    2018/5/17 19:14:37
    效果不错。收藏 回复
    Dream 0
    2018/5/17 14:15:12
    1993 0
    2018/5/17 9:43:01
    灭霸响指既视感
        ?莱??莱0
        2018/5/17 11:01:12
        同是九年义务教育,就你最优秀
    回复
取消回复