javascript - vue3实现红包雨怎么实现呢？

Question

vue3实现红包雨怎么实现呢？

vue3实现红包雨怎么实现呢？

Answer 1

可以参考这篇文章：https://www.xiabingbao.com/post/canvas/canvas-redpackrain.html

在线预览：https://www.xiabingbao.com/demos/ifr/redpack-rain-rgbrb9.html

文末评论区有仓库链接：https://github.com/wenzi0github/firework-redpack-rain

Answer 2

以下是一个基于Vue3实现的简单红包雨示例。此示例仅演示如何通过Vue3创建一个动画效果，可能需要根据实际需求进行修改和优化。

首先，你需要在你的项目中安装Vue3和相关依赖。

npm install vue@nextnpm install @vue/reactivitynpm install vue-property-decorator

然后，你可以创建一个新的Vue组件来显示红包雨。

<template>  <div class="red-envelope-container">    <div       v-for="(envelope, index) in envelopes"       :key="index"       class="red-envelope"       :style="{ top: `${envelope.y}px`, left: `${envelope.x}px` }"    >      {{ envelope.amount }}元    </div>  </div></template><script>import { ref, onMounted, onUnmounted } from 'vue';import { mapState } from 'vuex';import { random } from 'lodash';import { onIntersection } from 'Intersection Observer';export default {  name: 'RedEnvelope',  setup() {    const envelopes = ref([]);    const state = ref({});    const observer = null; // 用于观察红包是否在视窗内    const redEnvelopeClass = 'red-envelope'; // 红包样式类名    const containerHeight = ref(0); // 容器高度，用于计算红包的初始y坐标    const speed = ref(1000); // 红包下落速度，单位ms    const minAmount = ref(10); // 红包金额最小值，单位元    const maxAmount = ref(100); // 红包金额最大值，单位元    const numEnvelopes = ref(10); // 红包数量    const delay = ref(500); // 生成红包的延迟时间，单位ms    const duration = ref(2000); // 红包消失的持续时间，单位ms    const startY = ref(100); // 红包的初始y坐标，单位px    const maxY = ref(500); // 红包的最大y坐标，单位px    const minY = ref(200); // 红包的最小y坐标，单位px    const delayUntilIntersection = ref(2000); // 延迟到红包进入视窗内的时间，单位ms    const redEnvelopesContainer = document.querySelector('.red-envelope-container'); // 获取红包容器元素，用于计算容器高度和宽度    let timer = null; // 定时器，用于控制红包下落速度和消失时间    let intersectingEnvelopes = []; // 当前在视窗内的红包列表，用于延迟生成新红包直到上一次生成的红包全部消失后才继续生成新红包    let intersectionObserver = null; // 用于观察红包是否在视窗内，当不在视窗内时移除观察并从intersectingEnvelopes列表中移除该红包，当在视窗内时停止移除观察并从intersectingEnvelopes列表中添加该红包，并重新设置定时器生成新红包的时间和延迟时间，并设置定时器控制红包消失的持续时间。  },  methods: {    createRedEnvelope() {      const amount = Math.floor(Math.random() * (maxAmount.value - minAmount.value + 1)) + minAmount.value; // 随机生成金额（最小值minAmount~最大值maxAmount）      const x = Math.floor(Math.random() * (window.innerWidth - redEnvelopeClass.length * 15)); // 随机生成x坐标（保证每个红包至少有15px的间距）      const y = Math.random() * (maxY.value - minY.value) + minY.value; // 随机生成y坐标（最小值minY~最大值maxY）