当前位置：首页 > article >正文

成功撒花特效

article 2025/2/14 0:27:25

基础效果：
在这里插入图片描述

前端安装并引入canvas-confetti包
如有问题请使用满血版DeepSeek/国内直连GPT/Claude解答

1.安装

npm install --save canvas-confetti

2.在前端代码中引用

import confetti from 'canvas-confetti';

2.在前端代码中使用

把下面这个直接放到你的函数里面，调用即可，调用时机由自己控制，比如成功状态或者其他时机

        confetti({
            particleCount: 100,
            spread: 70,
            origin: { y: 0.6 }
        });

以上是基础撒花效果

3.更多示例

3.1随机方向撒花

在这里插入图片描述
代码配置如下：

          function randomInRange(min, max) {
            return Math.random() * (max - min) + min;
          }
          
          confetti({
            angle: randomInRange(55, 125),
            spread: randomInRange(50, 70),
            particleCount: randomInRange(50, 100),
            origin: { y: 0.6 }
          });

3.2更多粒子下/更真实特效

var count = 200;
var defaults = {
  origin: { y: 0.7 }
};

function fire(particleRatio, opts) {
  confetti({
    ...defaults,
    ...opts,
    particleCount: Math.floor(count * particleRatio)
  });
}

fire(0.25, {
  spread: 26,
  startVelocity: 55,
});
fire(0.2, {
  spread: 60,
});
fire(0.35, {
  spread: 100,
  decay: 0.91,
  scalar: 0.8
});
fire(0.1, {
  spread: 120,
  startVelocity: 25,
  decay: 0.92,
  scalar: 1.2
});
fire(0.1, {
  spread: 120,
  startVelocity: 45,
});

3.3 星光特效

在这里插入图片描述

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);