🎊人气榜单的投票五彩碎纸🎊

在不久之前的掘金开启了年度人气榜单活动，大家有没有注意到？

投票环节的五彩碎纸

如果还没注意到？

没关系

可以去围观看看

可以为自己投票也可以为自己喜欢的作者投票

至于投票的五彩碎纸是如何实现的，跟随着我的脚步一起学习一下吧

投票页面

🥳 案例1: 基本的彩炮！

3分钟带你了解一下这种碎纸的做法

• step1：安装一下包 npm install --save canvas-confetti 或者 直接在html页面引用 <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>

• step2: 引用完成，就可以直接写代码

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

• step3：效果

📖 案例2: 不同角度！

• step1：代码

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

• step2：效果

👬 案例3：

• step1: 代码

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

function fire(particleRatio, opts) {
  confetti(Object.assign({}, 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,
});

• step2: 效果

👑 案例4 星星✨：

• step1: 代码

var defaults = {
  spread: 360,
  ticks: 50,
  gravity: 0,
  decay: 0.94,
  startVelocity: 30,
  shapes: ['star'],
  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);

• step2: 效果

👑 案例5 烟火🎆：

• step1 代码

var duration = 15 * 1000;
var animationEnd = Date.now() + duration;
var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };

function randomInRange(min, max) {
  return Math.random() * (max - min) + min;
}

var interval = setInterval(function() {
  var timeLeft = animationEnd - Date.now();

  if (timeLeft <= 0) {
    return clearInterval(interval);
  }

  var particleCount = 50 * (timeLeft / duration);
  // since particles fall down, start a bit higher than random
  confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
  confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
}, 250);

• step2 效果:

👑 案例6 雪花❄️：

• step1 代码:

var 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(),
      // 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);
  }
}());

• step2 效果:

👑 案例7 校园荣耀喝彩：

• step1 代码：

var end = Date.now() + (15 * 1000);

// go Buckeyes!
var colors = ['#bb0000', '#ffffff'];

(function frame() {
  confetti({
    particleCount: 2,
    angle: 60,
    spread: 55,
    origin: { x: 0 },
    colors: colors
  });
  confetti({
    particleCount: 2,
    angle: 120,
    spread: 55,
    origin: { x: 1 },
    colors: colors
  });

  if (Date.now() < end) {
    requestAnimationFrame(frame);
  }
}());

-step2 效果:

👑 案例8 自定义：

在页面的自定义任何位置投放五彩碎纸。

• step1 代码:

// html
<canvas id="my-canvas" class="custom-canvas" width="1000" height="380"></canvas>

// style

<style>
  #my-canvas {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
</style>

var canvas = document.getElementById('my-canvas');

// you should  only initialize a canvas once, so save this function
// we'll save it to the canvas itself for the purpose of this demo
canvas.confetti = canvas.confetti || confetti.create(canvas, { resize: true });

canvas.confetti({
  spread: 70,
  origin: { y: 1.2 }
});

• step2 效果:

在页面的底部中间。

至此，八种彩炮效果全部罗列结束。大家可以自行去试试，简单的html就可以。也可以自己下个包去玩玩。

本文正在参加「金石计划 . 瓜分6万现金大奖」，如果觉得有用可以点赞收藏，如果有疑问可以直接在评论留言，欢迎交流 👏👏👏。