Vue3雪花组件：打造浪漫冬季飘雪效果

编程小白狼

发布于 2025-08-19 11:51:51

17600

代码可运行

文章被收录于专栏：编程小白狼编程小白狼

运行总次数：0

代码可运行

引言

在冬季主题网站中添加雪花飘落效果可以显著提升用户体验，营造节日氛围。本文将介绍如何使用Vue3实现一个灵活、高性能的雪花组件，让你的网站瞬间充满冬季的浪漫气息。

设计思路

我计划实现一个具有以下特性的雪花组件：

可配置的雪花数量、大小和速度
随机生成的雪花飘落路径
平滑自然的动画效果
响应式设计，适应不同屏幕尺寸
性能优化，避免过度消耗资源

完整代码实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3雪花组件 | 冬季特效</title>
  <script src="https://unpkg.com/vue@3.2.45/dist/vue.global.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #1a2a6c, #2c3e50);
      color: #ecf0f1;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      padding: 20px;
      overflow-x: hidden;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    
    header {
      text-align: center;
      padding: 40px 0;
      position: relative;
      z-index: 10;
    }
    
    h1 {
      font-size: 3rem;
      margin-bottom: 10px;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      background: linear-gradient(to right, #4facfe, #00f2fe);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .subtitle {
      font-size: 1.2rem;
      opacity: 0.9;
      max-width: 600px;
      margin: 0 auto 30px;
    }
    
    .content {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      margin: 30px 0;
    }
    
    .demo-section {
      flex: 1;
      min-width: 300px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 15px;
      padding: 25px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(10px);
      position: relative;
      overflow: hidden;
    }
    
    .controls {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      margin-top: 20px;
    }
    
    .control-group {
      margin-bottom: 20px;
    }
    
    label {
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
    }
    
    input[type="range"] {
      width: 100%;
      height: 8px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.1);
      outline: none;
    }
    
    .value-display {
      display: inline-block;
      min-width: 40px;
      text-align: right;
    }
    
    .code-section {
      flex: 1;
      min-width: 300px;
      background: #2c3e50;
      border-radius: 15px;
      padding: 25px;
      overflow: auto;
      max-height: 500px;
      position: relative;
    }
    
    pre {
      background: #1e2a38;
      padding: 20px;
      border-radius: 10px;
      overflow-x: auto;
      font-size: 0.9rem;
      line-height: 1.5;
    }
    
    code {
      color: #e0e0e0;
    }
    
    .comment {
      color: #7f8c8d;
    }
    
    .property {
      color: #f1c40f;
    }
    
    .value {
      color: #3498db;
    }
    
    .snow-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }
    
    .snowflake {
      position: absolute;
      background: white;
      border-radius: 50%;
      filter: blur(1.5px);
      top: -10px;
      pointer-events: none;
      user-select: none;
    }
    
    .feature-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin-top: 30px;
    }
    
    .feature-card {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 10px;
      padding: 20px;
      transition: transform 0.3s ease;
    }
    
    .feature-card:hover {
      transform: translateY(-5px);
      background: rgba(255, 255, 255, 0.1);
    }
    
    .feature-card h3 {
      margin-bottom: 10px;
      color: #3498db;
    }
    
    footer {
      text-align: center;
      margin-top: 40px;
      padding: 20px;
      opacity: 0.7;
      font-size: 0.9rem;
    }
    
    @media (max-width: 768px) {
      .content {
        flex-direction: column;
      }
      
      .controls {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="snow-container">
      <div 
        v-for="(snowflake, index) in snowflakes" 
        :key="index"
        class="snowflake"
        :style="{
          left: snowflake.x + 'px',
          top: snowflake.y + 'px',
          width: snowflake.size + 'px',
          height: snowflake.size + 'px',
          opacity: snowflake.opacity,
          transform: `rotate(${snowflake.rotation}deg)`,
          animation: `sway ${snowflake.swayDuration}s infinite ease-in-out alternate`
        }"
      ></div>
    </div>
    
    <div class="container">
      <header>
        <h1>Vue3雪花组件</h1>
        <p class="subtitle">轻松为你的网站添加冬季飘雪效果，高度可定制化，性能优化</p>
      </header>
      
      <div class="content">
        <div class="demo-section">
          <h2>实时演示</h2>
          <p>调整下方参数查看不同效果：</p>
          
          <div class="controls">
            <div class="control-group">
              <label>雪花数量: <span class="value-display">{{ snowflakeCount }}</span></label>
              <input type="range" min="10" max="300" v-model.number="snowflakeCount">
            </div>
            
            <div class="control-group">
              <label>雪花大小: <span class="value-display">{{ minSize }} - {{ maxSize }}px</span></label>
              <input type="range" min="1" max="15" v-model.number="maxSize">
            </div>
            
            <div class="control-group">
              <label>下落速度: <span class="value-display">{{ minSpeed }} - {{ maxSpeed }}px/s</span></label>
              <input type="range" min="10" max="200" v-model.number="maxSpeed">
            </div>
            
            <div class="control-group">
              <label>透明度: <span class="value-display">{{ minOpacity }} - {{ maxOpacity }}</span></label>
              <input type="range" min="0" max="10" step="0.1" v-model.number="maxOpacity">
            </div>
            
            <div class="control-group">
              <label>飘动幅度: <span class="value-display">{{ swayAmplitude }}px</span></label>
              <input type="range" min="0" max="100" v-model.number="swayAmplitude">
            </div>
            
            <div class="control-group">
              <label>飘动速度: <span class="value-display">{{ swaySpeed }}s</span></label>
              <input type="range" min="1" max="10" step="0.1" v-model.number="swaySpeed">
            </div>
          </div>
          
          <button @click="resetSnowflakes" style="
            background: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            margin-top: 10px;
          ">重置雪花</button>
        </div>
        
        <div class="code-section">
          <h2>组件源码</h2>
          <pre><code><template>
  <div class="snow-container">
    <div 
      v-for="(snowflake, index) in snowflakes" 
      :key="index"
      class="snowflake"
      :style="{
        left: snowflake.x + 'px',
        top: snowflake.y + 'px',
        width: snowflake.size + 'px',
        height: snowflake.size + 'px',
        opacity: snowflake.opacity,
        transform: `rotate(${snowflake.rotation}deg)`,
        animation: `sway ${snowflake.swayDuration}s infinite ease-in-out alternate`
      }"
    ></div>
  </div>
</template>

<script>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';

export default {
  name: 'Snowflakes',
  props: {
    count: { type: Number, default: 100 },
    minSize: { type: Number, default: 2 },
    maxSize: { type: Number, default: 8 },
    minSpeed: { type: Number, default: 20 },
    maxSpeed: { type: Number, default: 60 },
    minOpacity: { type: Number, default: 0.3 },
    maxOpacity: { type: Number, default: 0.9 },
    swayAmplitude: { type: Number, default: 50 },
    swaySpeed: { type: Number, default: 3 }
  },
  setup(props) {
    const snowflakes = ref([]);
    const windowWidth = ref(window.innerWidth);
    const windowHeight = ref(window.innerHeight);
    
    <span class="comment">// 生成随机雪花</span>
    const generateSnowflakes = () => {
      const flakes = [];
      
      for (let i = 0; i < props.count; i++) {
        flakes.push({
          x: Math.random() * windowWidth.value,
          y: Math.random() * windowHeight.value,
          size: props.minSize + Math.random() * (props.maxSize - props.minSize),
          speed: props.minSpeed + Math.random() * (props.maxSpeed - props.minSpeed),
          opacity: props.minOpacity + Math.random() * (props.maxOpacity - props.minOpacity),
          rotation: Math.random() * 360,
          swayDuration: props.swaySpeed + Math.random() * 2,
          swayDirection: Math.random() > 0.5 ? 1 : -1
        });
      }
      
      snowflakes.value = flakes;
    };
    
    <span class="comment">// 更新窗口尺寸</span>
    const updateWindowSize = () => {
      windowWidth.value = window.innerWidth;
      windowHeight.value = window.innerHeight;
    };
    
    <span class="comment">// 雪花动画</span>
    const animateSnowflakes = () => {
      snowflakes.value = snowflakes.value.map(snowflake => {
        let newY = snowflake.y + snowflake.speed * 0.016;
        
        <span class="comment">// 如果雪花超出屏幕底部，重新从顶部开始</span>
        if (newY > windowHeight.value) {
          newY = -snowflake.size;
          snowflake.x = Math.random() * windowWidth.value;
        }
        
        <span class="comment">// 更新位置</span>
        return {
          ...snowflake,
          y: newY,
          rotation: snowflake.rotation + 0.5
        };
      });
      
      animationFrame = requestAnimationFrame(animateSnowflakes);
    };
    
    let animationFrame = null;
    
    onMounted(() => {
      generateSnowflakes();
      window.addEventListener('resize', updateWindowSize);
      animationFrame = requestAnimationFrame(animateSnowflakes);
    });
    
    onUnmounted(() => {
      window.removeEventListener('resize', updateWindowSize);
      if (animationFrame) cancelAnimationFrame(animationFrame);
    });
    
    <span class="comment">// 监听props变化</span>
    watch(() => props.count, (newVal, oldVal) => {
      if (newVal > oldVal) {
        <span class="comment">// 增加雪花</span>
        const newFlakes = [];
        for (let i = 0; i < newVal - oldVal; i++) {
          newFlakes.push({
            x: Math.random() * windowWidth.value,
            y: -Math.random() * windowHeight.value,
            size: props.minSize + Math.random() * (props.maxSize - props.minSize),
            speed: props.minSpeed + Math.random() * (props.maxSpeed - props.minSpeed),
            opacity: props.minOpacity + Math.random() * (props.maxOpacity - props.minOpacity),
            rotation: Math.random() * 360,
            swayDuration: props.swaySpeed + Math.random() * 2,
            swayDirection: Math.random() > 0.5 ? 1 : -1
          });
        }
        snowflakes.value = [...snowflakes.value, ...newFlakes];
      } else {
        <span class="comment">// 减少雪花</span>
        snowflakes.value = snowflakes.value.slice(0, newVal);
      }
    });
    
    return { snowflakes };
  }
};
</script>

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

.snowflake {
  position: absolute;
  background: white;
  border-radius: 50%;
  filter: blur(1.5px);
  top: -10px;
  pointer-events: none;
  user-select: none;
}

@keyframes sway {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(v-bind('swayAmplitude + "px"'));
  }
}
</style></code></pre>
        </div>
      </div>
      
      <div class="feature-list">
        <div class="feature-card">
          <h3>性能优化</h3>
          <p>使用requestAnimationFrame实现流畅动画，动态调整雪花数量确保低性能设备也能流畅运行</p>
        </div>
        
        <div class="feature-card">
          <h3>高度可定制</h3>
          <p>提供多个可配置参数：雪花数量、大小、速度、透明度、飘动幅度等</p>
        </div>
        
        <div class="feature-card">
          <h3>响应式设计</h3>
          <p>自动适应不同屏幕尺寸，窗口大小变化时重新计算布局</p>
        </div>
        
        <div class="feature-card">
          <h3>自然效果</h3>
          <p>随机生成雪花属性，添加旋转和飘动动画，模拟真实雪花效果</p>
        </div>
      </div>
      
      <footer>
        <p>Vue3雪花组件 | 技术博客 | 使用说明：只需将组件引入你的Vue3项目并配置参数即可</p>
      </footer>
    </div>
  </div>

  <script>
    const { createApp, ref, computed, onMounted, onUnmounted, watch } = Vue;
    
    const app = createApp({
      setup() {
        // 雪花参数
        const snowflakeCount = ref(150);
        const minSize = ref(2);
        const maxSize = ref(8);
        const minSpeed = ref(20);
        const maxSpeed = ref(60);
        const minOpacity = ref(0.3);
        const maxOpacity = ref(0.9);
        const swayAmplitude = ref(50);
        const swaySpeed = ref(3);
        
        // 雪花数据
        const snowflakes = ref([]);
        const windowWidth = ref(window.innerWidth);
        const windowHeight = ref(window.innerHeight);
        
        // 生成随机雪花
        const generateSnowflakes = () => {
          const flakes = [];
          
          for (let i = 0; i < snowflakeCount.value; i++) {
            flakes.push({
              x: Math.random() * windowWidth.value,
              y: Math.random() * windowHeight.value,
              size: minSize.value + Math.random() * (maxSize.value - minSize.value),
              speed: minSpeed.value + Math.random() * (maxSpeed.value - minSpeed.value),
              opacity: minOpacity.value + Math.random() * (maxOpacity.value - minOpacity.value),
              rotation: Math.random() * 360,
              swayDuration: swaySpeed.value + Math.random() * 2,
              swayDirection: Math.random() > 0.5 ? 1 : -1
            });
          }
          
          snowflakes.value = flakes;
        };
        
        // 重置雪花
        const resetSnowflakes = () => {
          generateSnowflakes();
        };
        
        // 更新窗口尺寸
        const updateWindowSize = () => {
          windowWidth.value = window.innerWidth;
          windowHeight.value = window.innerHeight;
        };
        
        // 雪花动画
        const animateSnowflakes = () => {
          snowflakes.value = snowflakes.value.map(snowflake => {
            let newY = snowflake.y + snowflake.speed * 0.016;
            
            // 如果雪花超出屏幕底部，重新从顶部开始
            if (newY > windowHeight.value) {
              newY = -snowflake.size;
              snowflake.x = Math.random() * windowWidth.value;
            }
            
            // 更新位置
            return {
              ...snowflake,
              y: newY,
              rotation: snowflake.rotation + 0.5
            };
          });
          
          animationFrame = requestAnimationFrame(animateSnowflakes);
        };
        
        let animationFrame = null;
        
        onMounted(() => {
          generateSnowflakes();
          window.addEventListener('resize', updateWindowSize);
          animationFrame = requestAnimationFrame(animateSnowflakes);
        });
        
        onUnmounted(() => {
          window.removeEventListener('resize', updateWindowSize);
          if (animationFrame) cancelAnimationFrame(animationFrame);
        });
        
        // 监听雪花数量变化
        watch(snowflakeCount, (newVal, oldVal) => {
          if (newVal > oldVal) {
            // 增加雪花
            const newFlakes = [];
            for (let i = 0; i < newVal - oldVal; i++) {
              newFlakes.push({
                x: Math.random() * windowWidth.value,
                y: -Math.random() * windowHeight.value,
                size: minSize.value + Math.random() * (maxSize.value - minSize.value),
                speed: minSpeed.value + Math.random() * (maxSpeed.value - minSpeed.value),
                opacity: minOpacity.value + Math.random() * (maxOpacity.value - minOpacity.value),
                rotation: Math.random() * 360,
                swayDuration: swaySpeed.value + Math.random() * 2,
                swayDirection: Math.random() > 0.5 ? 1 : -1
              });
            }
            snowflakes.value = [...snowflakes.value, ...newFlakes];
          } else {
            // 减少雪花
            snowflakes.value = snowflakes.value.slice(0, newVal);
          }
        });
        
        return {
          snowflakeCount,
          minSize,
          maxSize,
          minSpeed,
          maxSpeed,
          minOpacity,
          maxOpacity,
          swayAmplitude,
          swaySpeed,
          snowflakes,
          resetSnowflakes
        };
      }
    });
    
    app.mount('#app');
  </script>
  
  <style>
    @keyframes sway {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(v-bind('swayAmplitude + "px"'));
      }
    }
  </style>
</body>
</html>

技术实现细节

1. 雪花生成算法

雪花组件使用以下算法创建自然效果：

function generateSnowflake() {
  return {
    x: Math.random() * windowWidth,
    y: Math.random() * windowHeight,
    size: minSize + Math.random() * (maxSize - minSize),
    speed: minSpeed + Math.random() * (maxSpeed - minSpeed),
    opacity: minOpacity + Math.random() * (maxOpacity - minOpacity),
    rotation: Math.random() * 360,
    swayDuration: swaySpeed + Math.random() * 2,
    swayDirection: Math.random() > 0.5 ? 1 : -1
  };
}

2. 动画系统

使用requestAnimationFrame实现流畅的60fps动画：

const animateSnowflakes = () => {
  // 更新雪花位置
  snowflakes.value = snowflakes.value.map(updatePosition);
  
  animationFrame = requestAnimationFrame(animateSnowflakes);
};

3. 响应式设计

监听窗口大小变化，动态调整雪花位置：

window.addEventListener('resize', updateWindowSize);

4. 性能优化

使用CSS transform代替top/left属性，减少重排
添加pointer-events: none避免雪花干扰用户交互
动态调整雪花数量以适应不同性能设备

使用指南

在你的Vue3项目中引入组件：

<template>
  <Snowflakes 
    :count="150"
    :min-size="2"
    :max-size="8"
    :min-speed="20"
    :max-speed="60"
    :sway-amplitude="50"
  />
</template>

<script>
import Snowflakes from './components/Snowflakes.vue';

export default {
  components: {
    Snowflakes
  }
};
</script>

参数配置

参数名	类型	默认值	说明
count	Number	100	雪花数量
min-size	Number	2	雪花最小尺寸(px)
max-size	Number	8	雪花最大尺寸(px)
min-speed	Number	20	最小下落速度(px/s)
max-speed	Number	60	最大下落速度(px/s)
min-opacity	Number	0.3	最小透明度
max-opacity	Number	0.9	最大透明度
sway-amplitude	Number	50	飘动幅度(px)
sway-speed	Number	3	飘动速度(s)