Vue.js 粒子连线动画组件 - FlyingLines

Vue.js 粒子连线动画组件 - FlyingLines 使用指南

🌟 简介

FlyingLines 是一个基于 Vue.js 的炫酷粒子连线动画组件，可以为您的网站添加动态的背景效果。该组件具有以下特点：

• ✨ 流畅动画：基于 Canvas 的高性能渲染
• 🖱️ 交互效果：鼠标跟随和粒子吸引
• 📱 响应式设计：支持移动端触摸交互
• 🎨 高度可定制：丰富的参数配置选项
• 🔧 开箱即用：简单的组件调用方式

📦 完整源码

FlyingLines.vue 组件文件

name

<template>
  <canvas ref="canvas" class="flying-lines-canvas"></canvas>
</template>

<script>
export default {
  name: 'FlyingLines',
  data() {
    return {
      // Canvas相关
      canvas: null,           // Canvas DOM元素
      ctx: null,              // Canvas 2D渲染上下文

      // 动画数据
      particles: [],          // 粒子数组
      mousePosition: {x: 0, y: 0},  // 鼠标位置
      animationId: null,      // 动画帧ID，用于取消动画

      // ==================== 可自定义参数 ====================
      // 粒子数量 (建议范围: 50-300)
      totalParticles: 120,

      // 粒子连接距离 (像素, 建议范围: 80-200)
      connectDistance: 150,

      // 粒子基础移动速度 (建议范围: 0.1-1.0)
      speed: 0.4,

      // 粒子大小范围 (建议范围: 0.5-3.0)
      particleMinSize: 0.5,   // 最小半径
      particleMaxSize: 2.0,   // 最大半径

      // 鼠标吸引力相关
      mouseAttractDistance: 225,  // 鼠标吸引距离 (connectDistance * 1.5)
      mouseAttractForce: 0.02,    // 鼠标吸引力强度 (建议范围: 0.01-0.05)

      // 粒子最大速度限制 (建议范围: 1.0-3.0)
      maxParticleSpeed: 1.5,

      // 颜色配置
      particleColor: {
        r: 100,     // 红色分量 (0-255)
        g: 118,     // 绿色分量 (0-255)
        b: 220,     // 蓝色分量 (0-255)
        minAlpha: 0.4,  // 最小透明度 (0-1)
        maxAlpha: 0.8   // 最大透明度 (0-1)
      },

      // 连接线颜色配置
      connectionLineColor: {
        r: 80,      // 红色分量 (0-255)
        g: 98,      // 绿色分量 (0-255)
        b: 200,     // 蓝色分量 (0-255)
        maxAlpha: 0.8,  // 最大透明度 (0-1)
        width: 1.2      // 线条宽度 (建议范围: 0.5-2.0)
      },

      // 鼠标连接线颜色配置
      mouseLineColor: {
        r: 220,     // 红色分量 (0-255)
        g: 120,     // 绿色分量 (0-255)
        b: 150,     // 蓝色分量 (0-255)
        maxAlpha: 0.85, // 最大透明度 (0-1)
        width: 1.5      // 线条宽度 (建议范围: 0.5-3.0)
      }
    };
  },

  mounted() {
    this.initCanvas();
    this.createParticles();
    this.addEventListeners();
    this.animate();
  },

  beforeUnmount() {
    this.cleanup();
  },

  methods: {
    /**
     * 初始化Canvas
     * 设置Canvas的2D渲染上下文并调整尺寸
     */
    initCanvas() {
      this.canvas = this.$refs.canvas;
      this.ctx = this.canvas.getContext('2d');

      this.resizeCanvas();
      // 监听窗口大小变化事件
      window.addEventListener('resize', this.resizeCanvas);
    },

    /**
     * 调整Canvas尺寸以适应窗口
     * 当窗口大小改变时自动调用
     */
    resizeCanvas() {
      this.canvas.width = window.innerWidth;
      this.canvas.height = window.innerHeight;
    },

    /**
     * 创建粒子数组
     * 根据totalParticles参数生成指定数量的粒子
     */
    createParticles() {
      this.particles = [];

      for (let i = 0; i < this.totalParticles; i++) {
        // 创建单个粒子对象
        this.particles.push({
          // 随机初始位置
          x: Math.random() * this.canvas.width,
          y: Math.random() * this.canvas.height,

          // 随机粒子大小 (在设定范围内)
          radius: Math.random() * (this.particleMaxSize - this.particleMinSize) + this.particleMinSize,

          // 随机初始速度 (在-speed/2 到 speed/2之间)
          vx: Math.random() * this.speed - this.speed / 2,
          vy: Math.random() * this.speed - this.speed / 2,

          // 随机颜色透明度
          color: `rgba(${this.particleColor.r}, ${this.particleColor.g}, ${this.particleColor.b}, ${
              Math.random() * (this.particleColor.maxAlpha - this.particleColor.minAlpha) + this.particleColor.minAlpha
          })`
        });
      }
    },

    /**
     * 添加事件监听器
     * 监听鼠标和触摸移动事件
     */
    addEventListeners() {
      window.addEventListener('mousemove', this.onMouseMove);
      window.addEventListener('touchmove', this.onTouchMove);
    },

    /**
     * 鼠标移动事件处理
     * @param {MouseEvent} e - 鼠标事件对象
     */
    onMouseMove(e) {
      this.mousePosition.x = e.clientX;
      this.mousePosition.y = e.clientY;
    },

    /**
     * 触摸移动事件处理 (移动端支持)
     * @param {TouchEvent} e - 触摸事件对象
     */
    onTouchMove(e) {
      if (e.touches.length > 0) {
        this.mousePosition.x = e.touches[0].clientX;
        this.mousePosition.y = e.touches[0].clientY;
      }
    },

    /**
     * 主动画循环
     * 使用requestAnimationFrame实现流畅动画
     */
    animate() {
      this.animationId = requestAnimationFrame(this.animate);

      // 清空画布
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

      // 更新粒子位置和状态
      this.updateParticles();

      // 绘制粒子
      this.drawParticles();

      // 绘制粒子间的连接线
      this.connectParticles();
    },

    /**
     * 更新所有粒子的位置和状态
     * 包括移动、边界检测、鼠标吸引等
     */
    updateParticles() {
      for (let i = 0; i < this.particles.length; i++) {
        const p = this.particles[i];

        // 1. 基础移动 - 根据粒子的速度向量移动
        p.x += p.vx;
        p.y += p.vy;

        // 2. 边界检测和反弹
        // 当粒子碰到画布边缘时反向移动
        if (p.x < 0 || p.x > this.canvas.width) p.vx = -p.vx;
        if (p.y < 0 || p.y > this.canvas.height) p.vy = -p.vy;

        // 3. 鼠标吸引效果
        // 计算粒子到鼠标的距离
        const dx = this.mousePosition.x - p.x;
        const dy = this.mousePosition.y - p.y;
        const distance = Math.sqrt(dx * dx + dy * dy);

        // 如果在吸引范围内，施加吸引力
        if (distance < this.mouseAttractDistance) {
          // 计算归一化的方向向量
          const forceDirectionX = dx / distance;
          const forceDirectionY = dy / distance;

          // 计算吸引力强度 (距离越近力越大)
          const force = (this.mouseAttractDistance - distance) / this.mouseAttractDistance;

          // 应用吸引力到粒子速度
          p.vx += forceDirectionX * force * this.mouseAttractForce;
          p.vy += forceDirectionY * force * this.mouseAttractForce;
        }

        // 4. 速度限制
        // 防止粒子移动过快，保持动画稳定
        const speed = Math.sqrt(p.vx * p.vx + p.vy * p.vy);
        if (speed > this.maxParticleSpeed) {
          p.vx = (p.vx / speed) * this.maxParticleSpeed;
          p.vy = (p.vy / speed) * this.maxParticleSpeed;
        }
      }
    },

    /**
     * 绘制所有粒子
     * 在画布上渲染每个粒子为小圆点
     */
    drawParticles() {
      for (let i = 0; i < this.particles.length; i++) {
        const p = this.particles[i];

        // 绘制圆形粒子
        this.ctx.beginPath();
        this.ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
        this.ctx.fillStyle = p.color;
        this.ctx.fill();
      }
    },

    /**
     * 绘制粒子间的连接线
     * 包括粒子之间的连线和粒子到鼠标的连线
     */
    connectParticles() {
      // 1. 绘制粒子间的连接线
      for (let i = 0; i < this.particles.length; i++) {
        for (let j = i + 1; j < this.particles.length; j++) {
          const p1 = this.particles[i];
          const p2 = this.particles[j];

          // 计算两粒子间距离
          const dx = p1.x - p2.x;
          const dy = p1.y - p2.y;
          const distance = Math.sqrt(dx * dx + dy * dy);

          // 如果距离小于连接距离，绘制连线
          if (distance < this.connectDistance) {
            // 根据距离计算透明度 (距离越近越不透明)
            const opacity = (1 - distance / this.connectDistance) * this.connectionLineColor.maxAlpha;

            // 设置线条样式
            this.ctx.strokeStyle = `rgba(${this.connectionLineColor.r}, ${this.connectionLineColor.g}, ${this.connectionLineColor.b}, ${opacity})`;
            this.ctx.lineWidth = this.connectionLineColor.width;

            // 绘制连线
            this.ctx.beginPath();
            this.ctx.moveTo(p1.x, p1.y);
            this.ctx.lineTo(p2.x, p2.y);
            this.ctx.stroke();
          }
        }

        // 2. 绘制粒子到鼠标的连线
        const p = this.particles[i];
        const dx = p.x - this.mousePosition.x;
        const dy = p.y - this.mousePosition.y;
        const distance = Math.sqrt(dx * dx + dy * dy);

        // 如果在鼠标吸引范围内，绘制连线
        if (distance < this.mouseAttractDistance) {
          // 根据距离计算透明度
          const opacity = (1 - distance / this.mouseAttractDistance) * this.mouseLineColor.maxAlpha;

          // 设置鼠标连线样式 (通常颜色不同，更显眼)
          this.ctx.strokeStyle = `rgba(${this.mouseLineColor.r}, ${this.mouseLineColor.g}, ${this.mouseLineColor.b}, ${opacity})`;
          this.ctx.lineWidth = this.mouseLineColor.width;

          // 绘制到鼠标的连线
          this.ctx.beginPath();
          this.ctx.moveTo(p.x, p.y);
          this.ctx.lineTo(this.mousePosition.x, this.mousePosition.y);
          this.ctx.stroke();
        }
      }
    },

    /**
     * 清理资源
     * 移除事件监听器并取消动画，防止内存泄漏
     */
    cleanup() {
      // 移除所有事件监听器
      window.removeEventListener('mousemove', this.onMouseMove);
      window.removeEventListener('touchmove', this.onTouchMove);
      window.removeEventListener('resize', this.resizeCanvas);

      // 取消动画帧
      cancelAnimationFrame(this.animationId);
    }
  }
}
</script>

<style scoped>
/*
  Canvas样式设置
  - position: fixed - 固定定位，覆盖整个屏幕
  - z-index: 1 - 在背景之上，但不会遮挡其他内容
  - pointer-events: none - 不响应鼠标事件，允许点击穿透
*/
.flying-lines-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
</style>

📦 安装和基础使用

1. 组件文件结构

首先，将组件文件保存为 FlyingLines.vue：

src/
  components/
    FlyingLines.vue

2. 基础调用方式

在您的 Vue 组件中引入和使用：

<template>
  <div class="app">
    <!-- 粒子动画背景 -->
    <FlyingLines />
    
    <!-- 您的页面内容 -->
    <div class="content">
      <h1>欢迎来到我的网站</h1>
      <p>这里是页面内容，粒子动画在背景中运行</p>
    </div>
  </div>
</template>

<script>
import FlyingLines from '@/components/FlyingLines.vue'

export default {
  name: 'App',
  components: {
    FlyingLines
  }
}
</script>

<style>
.app {
  position: relative;
  min-height: 100vh;
}

.content {
  position: relative;
  z-index: 10; /* 确保内容在粒子动画之上 */
  padding: 50px;
  text-align: center;
}
</style>

3. 在路由页面中使用

<template>
  <div class="home-page">
    <FlyingLines />
    <div class="page-content">
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<script>
import FlyingLines from '@/components/FlyingLines.vue'

export default {
  name: 'HomePage',
  components: {
    FlyingLines
  }
}
</script>

🎨 自定义配置

基础参数调整

您可以通过修改组件内的 data() 方法来自定义动画效果：

// 在 FlyingLines.vue 的 data() 中修改以下参数

// 粒子相关
totalParticles: 80,        // 减少粒子数量（性能优化）
speed: 0.6,                // 增加移动速度
connectDistance: 120,      // 减少连接距离

// 颜色配置
particleColor: {
  r: 255,     // 改为红色粒子
  g: 100,
  b: 100,
  minAlpha: 0.3,
  maxAlpha: 0.7
},

connectionLineColor: {
  r: 255,     // 红色连线
  g: 150,
  b: 150,
  maxAlpha: 0.6,
  width: 1.0
}

预设主题配置

🌙 深夜主题

// 深蓝色主题，适合深色背景
particleColor: {
  r: 100, g: 150, b: 255,
  minAlpha: 0.4, maxAlpha: 0.8
},
connectionLineColor: {
  r: 80, g: 130, b: 255,
  maxAlpha: 0.7, width: 1.2
},
mouseLineColor: {
  r: 150, g: 200, b: 255,
  maxAlpha: 0.9, width: 1.8
}

🌸 温暖主题

// 暖色调主题
particleColor: {
  r: 255, g: 180, b: 120,
  minAlpha: 0.5, maxAlpha: 0.8
},
connectionLineColor: {
  r: 255, g: 150, b: 100,
  maxAlpha: 0.6, width: 1.0
},
mouseLineColor: {
  r: 255, g: 120, b: 80,
  maxAlpha: 0.8, width: 1.5
}

🌿 清新主题

// 绿色清新主题
particleColor: {
  r: 100, g: 255, b: 150,
  minAlpha: 0.4, maxAlpha: 0.7
},
connectionLineColor: {
  r: 80, g: 200, b: 120,
  maxAlpha: 0.6, width: 1.1
},
mouseLineColor: {
  r: 120, g: 255, b: 180,
  maxAlpha: 0.8, width: 1.6
}

🔧 高级配置

性能优化配置

针对不同设备进行性能优化：

// 移动端优化配置
totalParticles: 60,          // 减少粒子数量
connectDistance: 100,        // 减少连接距离
speed: 0.3,                  // 降低速度
maxParticleSpeed: 1.0,       // 限制最大速度

// 高性能设备配置
totalParticles: 200,         // 更多粒子
connectDistance: 180,        // 更大连接范围
speed: 0.5,
maxParticleSpeed: 2.0

交互效果调整

// 强交互效果
mouseAttractDistance: 300,   // 更大的鼠标影响范围
mouseAttractForce: 0.04,     // 更强的吸引力

// 轻微交互效果
mouseAttractDistance: 150,   // 较小的影响范围
mouseAttractForce: 0.015,    // 较弱的吸引力

📱 响应式适配

根据设备类型自动调整

您可以在组件的 mounted() 钩子中添加设备检测：

mounted() {
  // 检测设备类型并调整参数
  if (this.isMobileDevice()) {
    this.totalParticles = 60;
    this.connectDistance = 100;
    this.speed = 0.3;
  }
  
  this.initCanvas();
  this.createParticles();
  this.addEventListeners();
  this.animate();
},

methods: {
  isMobileDevice() {
    return window.innerWidth < 768 || /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  },
  // ... 其他方法
}

🎯 使用场景

1. 首页背景

<!-- 网站首页 -->
<template>
  <div class="landing-page">
    <FlyingLines />
    <header class="hero-section">
      <h1>欢迎来到未来</h1>
      <p>科技感十足的粒子动画背景</p>
    </header>
  </div>
</template>

2. 登录页面

<!-- 登录页面 -->
<template>
  <div class="login-page">
    <FlyingLines />
    <div class="login-form">
      <form>
        <!-- 登录表单 -->
      </form>
    </div>
  </div>
</template>

<style>
.login-form {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  padding: 40px;
  border-radius: 10px;
  backdrop-filter: blur(10px);
}
</style>

3. 作品展示页

<!-- 作品集页面 -->
<template>
  <div class="portfolio">
    <FlyingLines />
    <div class="portfolio-grid">
      <!-- 作品展示内容 -->
    </div>
  </div>
</template>

⚡ 性能优化建议

1. 粒子数量控制

• 桌面端: 100-200 个粒子
• 移动端: 50-80 个粒子
• 低端设备: 30-50 个粒子

2. 连接距离优化

• 连接距离过大会导致大量线条绘制，影响性能
• 建议范围：80-150px

3. 动画帧率控制

如果需要进一步优化，可以添加帧率控制：

animate() {
  // 限制为30FPS以节省性能
  setTimeout(() => {
    this.animationId = requestAnimationFrame(this.animate);
  }, 1000 / 30);
  
  // ... 动画逻辑
}

🎨 样式自定义

背景模糊效果

.content {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

渐变遮罩

.flying-lines-canvas::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    rgba(0,0,0,0.1) 0%, 
    transparent 50%, 
    rgba(255,255,255,0.1) 100%);
  pointer-events: none;
}

🐛 常见问题

Q: 粒子动画在某些浏览器中不显示？

A: 确保浏览器支持 Canvas API，对于老旧浏览器可以添加 polyfill。

Q: 移动端性能较差怎么办？

A: 减少粒子数量，降低连接距离，或者在移动端禁用动画。

Q: 如何在组件销毁时确保资源清理？

A: 组件已经在 beforeUnmount 钩子中处理了资源清理，无需额外操作。

Q: 能否动态修改动画参数？

A: 可以通过 Vue 的响应式数据来动态修改参数，修改后调用 createParticles() 重新生成粒子。