下雪特效vue实现

下雪特效的 Vue 实现方法

使用 CSS 动画实现基础下雪效果

通过 CSS 的 @keyframes 动画和 transform 属性创建雪花飘落效果。在 Vue 的模板中添加多个雪花元素，每个雪花通过随机生成的样式实现不同的飘落路径和速度。

<template>
  <div class="snow-container">
    <div v-for="(snow, index) in snowflakes" :key="index" class="snowflake" :style="snow.style"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      snowflakes: [],
      snowflakeCount: 50 // 雪花数量
    };
  },
  mounted() {
    this.createSnowflakes();
  },
  methods: {
    createSnowflakes() {
      for (let i = 0; i < this.snowflakeCount; i++) {
        this.snowflakes.push({
          style: {
            left: `${Math.random() * 100}%`,
            animationDuration: `${Math.random() * 3 + 2}s`,
            animationDelay: `${Math.random() * 5}s`,
            opacity: Math.random(),
            width: `${Math.random() * 10 + 5}px`,
            height: `${Math.random() * 10 + 5}px`
          }
        });
      }
    }
  }
};
</script>

<style>
.snow-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

.snowflake {
  position: absolute;
  background-color: white;
  border-radius: 50%;
  animation: fall linear infinite;
}

@keyframes fall {
  to {
    transform: translateY(100vh) rotate(360deg);
  }
}
</style>

使用 Canvas 实现高性能下雪效果

对于更复杂的场景或大量雪花，Canvas 是更好的选择。通过 Vue 的 ref 获取 Canvas 元素，并在 mounted 钩子中绘制雪花。

<template>
  <canvas ref="snowCanvas" class="snow-canvas"></canvas>
</template>

<script>
export default {
  mounted() {
    const canvas = this.$refs.snowCanvas;
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const snowflakes = [];
    const snowflakeCount = 100;

    for (let i = 0; i < snowflakeCount; i++) {
      snowflakes.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        radius: Math.random() * 4 + 1,
        speed: Math.random() * 3 + 1,
        opacity: Math.random()
      });
    }

    function drawSnowflakes() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = 'white';

      snowflakes.forEach(flake => {
        ctx.beginPath();
        ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
        ctx.globalAlpha = flake.opacity;
        ctx.fill();

        flake.y += flake.speed;
        if (flake.y > canvas.height) {
          flake.y = 0;
          flake.x = Math.random() * canvas.width;
        }
      });

      requestAnimationFrame(drawSnowflakes);
    }

    drawSnowflakes();
  }
};
</script>

<style>
.snow-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}
</style>

使用第三方库实现高级效果

如果需要更丰富的效果，可以使用专门的动画库如 particles.js 或 vue-particles。

安装 vue-particles：

npm install vue-particles

在 Vue 项目中注册并使用：

import VueParticles from 'vue-particles'
Vue.use(VueParticles)

在模板中添加组件：

<template>
  <div>
    <vue-particles
      color="#ffffff"
      :particleOpacity="0.7"
      :particlesNumber="80"
      shapeType="circle"
      :particleSize="4"
      linesColor="#ffffff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    />
  </div>
</template>

响应式调整

对于 Canvas 方案，需要监听窗口大小变化并调整 Canvas 尺寸：

mounted() {
  // ...初始化代码...
  window.addEventListener('resize', this.handleResize);
},
methods: {
  handleResize() {
    const canvas = this.$refs.snowCanvas;
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
}