canvas-confetti是一个轻量级JavaScript库，用于创建网页炫彩纸屑动画效果。该库提供多种自定义选项，包括粒子数量、角度和速度等，方便开发者为网页增添欢庆氛围。支持npm安装和CDN引入，同时考虑了用户的减少动效需求。库还支持自定义形状和文字纸屑，增强动画的个性化。canvas-confetti为网页添加趣味性和互动性，是一个实用的开发工具。
为什么选择 Canvas Confetti?
- 轻量级：库本身非常小巧，不会对页面性能造成影响。
- 高效：使用 HTML5 Canvas 实现，具有高效的渲染性能，即使在复杂的页面中也能流畅运行。
- 灵活可定制：支持多种配置选项，允许开发者根据需求自定义纸屑的颜色、形状、大小和数量。
- 简单易用：API 设计非常简洁，只需要几行代码就能实现炫酷的庆祝效果。
安装
1、npm 安装
1npm i canvas-confetti
导入依赖
1import confetti from 'canvas-confetti'
2、浏览器端引入
<!-- script 直接引入 -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.4/dist/confetti.browser.min.js"></script>
<!-- ESM 引入 -->
<script type="module">import confetti from 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.4/+esm'</script>
示例
1、随机方向+随机范围+随机数量
<button id="start">启动动画效果</button>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.4/dist/confetti.browser.min.js"></script><script> // 生成随机数 function randomInRange(min, max) {
return Math.random() * (max - min) + min;
}
document.querySelector('#start').addEventListener('click', function() {
confetti({
angle: randomInRange(55, 125),
spread: randomInRange(50, 70),
particleCount: randomInRange(50, 100),
origin: { y: 0.6 }
});
})
</script>
2、在页面上放一组烟花庆祝下
<button id="start">启动动画效果</button>
<script type="module"> import confetti from 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.4/+esm' // 生成随机数 function randomInRange(min, max) {
return Math.random() * (max - min) + min;
}
document.querySelector('#start').addEventListener('click', function() {
// 烟花效果持续 5 秒 const duration = 5 * 1000;
const animationEnd = Date.now() + duration;
// 默认配置参数 const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
const interval = setInterval(function() {
const timeLeft = animationEnd - Date.now();
if (timeLeft <= 0) {
return clearInterval(interval);
}
const particleCount = 50 * (timeLeft / duration);
// 同时启动两个烟花位置 confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } });
confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } });
}, 250);
})
</script>
3、控制动画图案
<button id="start">启动动画效果</button>
<script type="module"> import confetti from 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.4/+esm'
const 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']
});
}
document.querySelector('#start').addEventListener('click', function() {
// 控制动画延迟显示 setTimeout(shoot, 0);
setTimeout(shoot, 100);
setTimeout(shoot, 200);
})
</script>
4、冬天到了，网页上也可以下一场雪
<body>
<button id="start">启动动画效果</button>
<script type="module"> import confetti from 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.4/+esm'
// 生成随机数 function randomInRange(min, max) {
return Math.random() * (max - min) + min;
}
document.querySelector('#start').addEventListener('click', function() {
// 效果持续 5 秒 var duration = 5 * 1000;
var animationEnd = Date.now() + duration;
var skew = 1;
(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(),
// since particles fall down, skew start toward the top 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);
}
}());
})
</script></body>
仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！
链接: https://fly63.com/nav/4784
