您现在的位置是：首页 >其他 >canvas-confetti五彩纸屑洒落效果vue网站首页其他

canvas-confetti 是一个基于 Canvas 的库，用于在 Web 页面中实现炫酷的彩色纸屑动画效果。它实现了高性能、流畅的纸屑动画效果，同时兼容各种现代浏览器。提供了许多可自定义的选项，如纸屑颜色、形状、数量、速度、角度、发射器位置等，可以轻松实现不同的纸屑效果。并支持多种触发方式，如点击按钮、滚动页面、定时触发等，可根据需求进行定制

五彩纸屑从上洒落下来的实现效果：

1. 安装依赖

npm install --save canvas-confetti  

2. 代码

<template>
  <div class="container  ">
ddd
<button @click="stopAnimation">停止动画</button>
  </div>
</template>
<script setup>
import confetti from 'canvas-confetti';
 import { ref } from 'vue';
 

//天空飘落
 var duration = 15 * 1000;
var animationEnd = Date.now() + duration; // 动画结束时间
var skew = 1;// 倾斜度
const animationFrameId = ref(null);
function randomInRange(min, max) {
  return Math.random() * (max - min) + min;
}
function getRandomColor() {
  const colors = ['#c24c95', '#eab394', '#98fb98', '#1e90ff', '#add8e6', '#d2691e','#ffd700'];
  return colors[Math.floor(Math.random() * colors.length)];
}

(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: [getRandomColor()],
    shapes: ['square'],// 形状
    gravity: randomInRange(0.4, 0.6), // 重力
    scalar: randomInRange(0.4, 1), // 大小
    drift: randomInRange(-0.4, 0.4) // 位移
  });

  // requestAnimationFrame(frame);
  animationFrameId.value = requestAnimationFrame(frame);
  // if (timeLeft > 0) {
  //   animationFrameId.value = requestAnimationFrame(frame);
  // }
}());

function stopAnimation() {
  if (animationFrameId.value) {
    cancelAnimationFrame(animationFrameId.value);
  }
}


</script>

<style scoped >
.container {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #000;
position: relative;


}

</style>