按钮和图标-anime.js动画粒子特效jQuery插件 | 蓝文资源库

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

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

使用方法

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

<script src="js/anime.min.js"></script>
<script src="dist/particles.min.js"></script>         

HTML结构

在页面中插入一个按钮。

<button class="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插件允许我们设置配置参数，可用的配置参数如下：

参数	类型	默认值	描述
canvasPadding	Integer	150	在目标元素上生成的`canvas`的偏移值。`canvasPadding = 0`表示生成的`canvas`和目标元素重合。
duration	Integer	1000	粒子动画的持续时间，单位毫秒。
easing	String/Function	easeInOutCubic	粒子动画的easing效果。由anime.js传入。
type	String	circle	粒子的类型，可以是以下三种类型：circle，rectangle， triangle。
style	String	fill	粒子的样式，可以是：fill，stroke。
direction	String	left	目标元素开始分解为粒子的起始方向，可以是：left, right top, bottom。相反的方向用于执行合成操作。
size	Float/Function	从1-4的随机数	粒子的大小，单位像素。
speed	Float/Function	-2到2的随机数	粒子移动多少像素每帧。
color	String	目标元素的背景颜色	粒子的填充颜色。
particlesAmountCoefficient	Float	3	计算粒子数量的系数。`particlesAmountCoefficient = 0`的结果是生成0个粒子，数值越大，产生的粒子越多。
oscillationCoefficient	Float	20	计算粒子动画是振荡浮动的系数。`oscilationCoefficient = 0`表示粒子不振荡，值越大，里振荡幅度越大。
begin	Function	undefined	开始执行粒子动画前的回调函数。
complete	Function	undefined	执行粒子动画结束后的回调函数。

该js点击按钮动画粒子特效的github地址为：https://github.com/codrops/ParticleEffectsButtons/

在线预览网盘下载

郑重声明：

1 本资源来源于互联网，资源的版权归资源原作者所持有，受《中华人民共和国著作权法》等相关法律保护。

2 由于无法和原作者取得联系，所以上传的部分资源无法先通过原作者的同意就分享给大家了，如本资源侵犯了您（原作者）的权益，请联系我们（微信号 xiaohaimei1989），我们会立马删除您的资源，并向您表达诚挚的歉意！

3 本站是一个公益型网站，分享资源的目的在于传播知识，分享知识，收取一点点打赏的辛苦费是用于网站的日常运营开支，并非用于商业用途。

4 本站资源只提供学习和参考研究使用，使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。

一	二	三	四	五	六	日
« 12月
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

使用方法

HTML结构

初始化插件

配置参数

郑重声明：

相关文章

发表评论 取消回复

发表评论取消回复