tsParticlesTrail效果：创建跟随鼠标的粒子轨迹-优快云博客

tsParticlesTrail效果：创建跟随鼠标的粒子轨迹

【免费下载链接】tsparticles tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components. 项目地址: https://gitcode.com/gh_mirrors/ts/tsparticles

你是否曾想为网站添加令人惊艳的交互效果？tsParticles的Trail（轨迹）效果能让鼠标移动时产生梦幻般的粒子跟随效果，为静态页面注入生命力。本文将详解实现步骤，无需复杂编程知识，10分钟即可上手。

Trail效果核心原理

Trail效果通过捕捉鼠标坐标变化，在移动路径上生成临时粒子并设置衰减动画，形成跟随轨迹。该功能由effects/trail/模块实现，支持粒子数量、颜色渐变、生命周期等参数自定义。

实现流程图

mermaid

快速开始：3步集成Trail效果

1. 引入资源

通过国内CDN加载tsParticles核心库和Trail效果插件：

<script src="https://cdn.jsdelivr.net/npm/tsparticles@2.12.0/tsparticles.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/effect-trail@2.12.0/tsparticles.effect.trail.min.js"></script>

2. 创建容器

在HTML中添加粒子画布容器：

<div id="tsparticles" style="width: 100%; height: 400px;"></div>

3. 初始化配置

通过JavaScript启动Trail效果：

(async () => {
  await loadTrailEffect(tsParticles);
  
  await tsParticles.load({
    id: "tsparticles",
    options: {
      particles: {
        number: { value: 80 },
        color: { value: "#ff0000" },
        shape: { type: "circle" },
        opacity: { value: 0.5 }
      },
      interactivity: {
        events: {
          onHover: { enable: true, mode: "trail" }
        },
        modes: {
          trail: {
            delay: 0.005,
            quantity: 5,
            particles: {
              color: { value: "#00ff00" },
              shape: { type: "star" },
              life: { duration: 1 }
            }
          }
        }
      }
    }
  });
})();

配置参数详解

基础参数

参数	类型	默认值	说明
delay	number	0.005	粒子生成间隔（秒）
quantity	number	5	每次生成粒子数量
particles	object	-	轨迹粒子样式配置

高级样式定制

通过修改particles子配置实现多样化效果：

trail: {
  particles: {
    color: { 
      value: ["#ff0000", "#00ff00", "#0000ff"],
      animation: { enable: true, speed: 20 }
    },
    shape: { type: "square" },
    size: { value: { min: 2, max: 8 } },
    life: { duration: 2, sync: false }
  }
}

实际效果演示

官方Demo中已集成Trail效果预设，可直接体验：

Demo页面（选择"Trails"预设）

常见应用场景

官网首页背景
产品展示区域交互
按钮悬停特效
游戏界面引导

性能优化建议

控制粒子数量（建议≤50）
缩短生命周期（duration≤2秒）
禁用移动设备触摸追踪：

interactivity: {
  events: {
    onHover: { enable: true },
    onTouch: { enable: false }
  }
}

完整示例代码

完整配置文件可参考项目仓库：tsParticles配置示例

// 完整配置示例
const trailConfig = {
  particles: {
    number: { value: 50 },
    color: { value: "#ffffff" },
    shape: { type: "circle" },
    opacity: { value: 0.8 },
    size: { value: 3 },
    links: { enable: false }
  },
  interactivity: {
    events: {
      onHover: {
        enable: true,
        mode: "trail"
      }
    },
    modes: {
      trail: {
        delay: 0.005,
        quantity: 5,
        particles: {
          color: { value: "#ff00ff" },
          shape: { type: "circle" },
          size: { value: 2 },
          life: { duration: 1 }
        }
      }
    }
  }
};

扩展阅读

官方文档：Trail效果模块
配置参考：完整参数列表
更多效果：粒子系统插件

通过Trail效果，简单几行代码即可让页面交互体验提升一个档次。尝试不同参数组合，创造独特的视觉效果吧！

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考