html樱花飘落特效源码免费开源的五彩纸屑飘动特效的 JS 库多用于在网页上欢快庆贺场景

本日看科技周刊看到的一个酷炫的动效库，利用大略，视觉效果很好，推举给大家。

Canvas Confetti 先容

Canvas Confetti 是一个基于 JavaScript 的殊效动画库，可以在网页界面上轻松地实现五彩纸屑飞舞的庆祝场景殊效。
这个殊效库封装了几种酷炫的殊效，开拓者通过大略的几行代码就可以实现这些动效。

根本效果

html樱花飘落特效源码免费开源的五彩纸屑飘动特效的 JS 库多用于在网页上欢快庆贺场景 SQL

技能特性内置的粒子系统、仿照重力、衰减、漂移等算法，完美仿照了纸屑飘落的效果，呈现出了媲美游戏的视觉效果；五彩飞舞动画基于 HTML5 的 canvas 元素实现，兼容性不错；除了内置的纸屑，也支持自定义纸屑的形状，图片、SVG和笔墨都支持；开拓上手体验

我们都知道 CSS3 的动画很强大，但想要实现类似于抛撒碎纸屑这么繁芜的动画时，CSS3 来实现就显得很困难了，以前我碰着这种需求，都是考虑通过 hilo.js 这样的 H5 游戏引擎中的粒子系统来实现。
不过本日看阮一峰老师的科技周刊，看到他推举了一款专门用来实现抛撒五彩纸屑动效的工具库，研究了一下创造效果很好，利用也大略，于是决定写一篇文章推举给大家。

安装和大略利用

npm install --save canvas-confetti

也可以在 HTML 的直接引入 js 文件：

<script src="./confetti.browser.min.js"></script>

通过下面几行代码就可以大略实现一个抛撒五彩纸屑的殊效动画：

confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 }});基于 Canvas 实现

Canvas Confetti 的动画是在网页上创建了一个铺满全屏的画布（canvas），这个 canvas 是无法相应事宜的，比如无法点击，这样就相称于覆盖了一个纯视觉的动画层，完备不影响原有的网页界面。

须要把稳的是，Canvas Confetti 是一个 JS 工具库，但只能运行在客户端（浏览器环境），是不能运行在 Node.js 这样的做事真个。
其余，Canvas Confetti 实例化后的工具返回的是 Promise 工具，当代浏览器都支持，但老旧的浏览器（如 IE）是不支持的，如果要在这些浏览器上运行，一样平常须要利用 Promise 的 polyfills 来担保正常支持 Promise。

几个故意思的参数

一样平常来说，只须要搞懂下面几个参数就可以知足场景的庆祝场面，我总结了一下，见下面的表格：

参数名称

默认值

利用解释

particleCount

要抛撒的五彩纸屑的数量。
把稳不要设置太大，否则会有性能问题导致卡顿。

spread

五彩纸屑可以偏离中央多远，单位是角度。

Ticks

200

五彩纸屑移动的次数。
如果以为五彩纸屑消逝得太快，可以适当调度。

紧张参数解释

如果上面几个参数不足用，还有不少参数须要一点数学知识才能更好理解，可以查看官网解释。更多繁芜示例五彩烟花效果

烟花效果

即把五彩纸屑更换成金色的星星。

粒子图案是星星

var defaults = { spread: 360, ticks: 50, gravity: 0, decay: 0.94, startVelocity: 30, colors: ['FFE400', 'FFBD00', 'E89400', 'FFCA6C', 'FDFFB8']};function shoot() { confetti({ ...defaults, particleCount: 40, scalar: 1.2, shapes: ['star'] }); confetti({ ...defaults, particleCount: 10, scalar: 0.75, shapes: ['circle'] });}setTimeout(shoot, 0);setTimeout(shoot, 100);setTimeout(shoot, 200);雪花着落效果

下面代码实现的是让白色的纸屑像雪花一样飘落满屏的效果，多在浪漫温馨的场景中利用。

雪花飘后进果

ar duration = 15 1000;var animationEnd = Date.now() + duration;var skew = 1;function randomInRange(min, max) { return Math.random() (max - min) + min;}(function frame() { var timeLeft = animationEnd - Date.now(); var ticks = Math.max(200, 500 (timeLeft / duration)); skew = Math.max(0.8, skew - 0.001); confetti({ particleCount: 1, startVelocity: 0, ticks: ticks, origin: { x: Math.random(), y: (Math.random() skew) - 0.2 }, colors: ['#ffffff'], shapes: ['circle'], gravity: randomInRange(0.4, 0.6), scalar: randomInRange(0.4, 1), drift: randomInRange(-0.4, 0.4) }); if (timeLeft > 0) { requestAnimationFrame(frame); }}());

总之这个工具库功能真的很强大，上面几个都是很酷炫的效果，更多效果可以自己去考试测验。

免费开源解释

Canvas Confetti 是一个免费开源的 JS 动画殊效工具库，项目源码基于 ISC 容许协议托管在 Github 上，我们可以自由地下载来利用，也可以免费授权用于商业项目。

↓↓点击查看本次分享的网站。

Canvas Confetti - 免费开源的五彩纸屑飞舞殊效的 JS 库，多用于在网页上实现欢快庆祝的场景｜那些免费的砖