获取 Demo
源代码请在公众号回复“vue3粒子动画” 。

项目简介
tsparticles-demo
是一个基于 Vue 3 和 tsparticles 粒子特效库的可视化演示项目。项目通过简单的界面和丰富的粒子效果,展示了如何在现代前端框架中集成和自定义高性能的粒子动画,适用于网页背景、交互特效等多种场景。
无依赖项(*),浏览器直接可用,且兼容 React.js、Vue.js(2.x 和 3.x)、Angular、Svelte、jQuery、Preact、Inferno、Riot.js、Solid.js 以及 Web Components。
主要功能
- 多种粒子特效切换:支持”默认示例”、”闪烁”、”彩色气泡”、”雪花”、”五彩三角”、”彩色星星”等多种粒子动画效果,用户可通过右上角下拉菜单实时切换。
- 高性能渲染:基于 tsparticles 库,动画流畅,性能优异,适配各类终端设备。
- 交互体验:支持鼠标悬停、点击等交互,粒子会根据用户操作产生动态响应,提升用户参与感。
- 易于扩展:所有粒子配置均以 JSON 形式存储,便于二次开发和自定义更多特效。
技术栈
- Vue 3:现代化渐进式前端框架,组件化开发,响应式数据绑定。
- tsparticles & @tsparticles/vue3:强大的粒子动画库及其 Vue 适配器。
- Vite:极速开发与构建工具,提升开发效率。
- Tailwind CSS:原子化 CSS 框架,快速实现美观界面。
适用场景
- 网站首页、登录页、404 页面等背景特效
- 活动、节日、庆典等氛围营造
- 交互式可视化演示、前端动画教学
- 任何需要酷炫粒子动画的前端项目
依赖安装
npm install @tsparticles/vue3 tsparticles
项目结构
tsparticles-demo
├── public
│ └── index.html
├── src
│ ├── assets
│ ├── components
│ ├── pages
│ ├── App.vue
│ ├── main.js
│ └── tsconfig.json
├── .gitignore
├── package.json
示例
基础示例
全局注册粒子组件:
import Particles from "@tsparticles/vue3";
import { loadFull } from "tsparticles";
app.use(Particles, {
init: async (engine) => {
await loadFull(engine);
},
});
组件使用
<template>
<div class="tsparticles min-h-screen relative">
<vue-particles id="tsparticles" :options="particlesOptions" />
</div>
</template>
<script setup>
import { ref } from "vue";
const particlesOptions = {
background: {
color: "#282c34",
},
interactivity: {
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
resize: true,
},
modes: {
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#ffffff",
},
links: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
collisions: {
enable: true,
},
move: {
direction: "none",
enable: true,
outModes: {
default: "bounce",
},
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
random: true,
value: 5,
},
},
};
</script>
<style scoped>
.tsparticles {
width: 100vw;
height: 100vh;
position: relative;
}
</style>
闪烁效果
{
"autoPlay": true,
"background": {
"color": {
"value": "#0d47a1"
},
"image": "",
"position": "",
"repeat": "",
"size": "",
"opacity": 1
},
"backgroundMask": {
"composite": "destination-out",
"cover": {
"opacity": 1,
"color": {
"value": ""
}
},
"enable": false
},
"clear": true,
"defaultThemes": {},
"delay": 0,
"fullScreen": {
"enable": true,
"zIndex": 0
},
"detectRetina": true,
"duration": 0,
"fpsLimit": 120,
"interactivity": {
"detectsOn": "window",
"events": {
"onClick": {
"enable": true,
"mode": "push"
},
"onDiv": {
"selectors": {},
"enable": false,
"mode": {},
"type": "circle"
},
"onHover": {
"enable": true,
"mode": "repulse",
"parallax": {
"enable": false,
"force": 2,
"smooth": 10
}
},
"resize": {
"delay": 0.5,
"enable": true
}
},
"modes": {
"trail": {
"delay": 1,
"pauseOnStop": false,
"quantity": 1
},
"attract": {
"distance": 200,
"duration": 0.4,
"easing": "ease-out-quad",
"factor": 1,
"maxSpeed": 50,
"speed": 1
},
"bounce": {
"distance": 200
},
"bubble": {
"distance": 400,
"duration": 2,
"mix": false,
"opacity": 0.8,
"size": 40,
"divs": {
"distance": 200,
"duration": 0.4,
"mix": false,
"selectors": {}
}
},
"connect": {
"distance": 80,
"links": {
"opacity": 0.5
},
"radius": 60
},
"grab": {
"distance": 400,
"links": {
"blink": false,
"consent": false,
"opacity": 1
}
},
"push": {
"default": true,
"groups": [],
"quantity": 4
},
"remove": {
"quantity": 2
},
"repulse": {
"distance": 200,
"duration": 0.4,
"factor": 100,
"speed": 1,
"maxSpeed": 50,
"easing": "ease-out-quad",
"divs": {
"distance": 200,
"duration": 0.4,
"factor": 100,
"speed": 1,
"maxSpeed": 50,
"easing": "ease-out-quad",
"selectors": {}
}
},
"slow": {
"factor": 3,
"radius": 200
},
"particle": {
"replaceCursor": false,
"pauseOnStop": false,
"stopDelay": 0
},
"light": {
"area": {
"gradient": {
"start": {
"value": "#ffffff"
},
"stop": {
"value": "#000000"
}
},
"radius": 1000
},
"shadow": {
"color": {
"value": "#000000"
},
"length": 2000
}
}
}
},
"manualParticles": [],
"particles": {
"bounce": {
"horizontal": {
"value": 1
},
"vertical": {
"value": 1
}
},
"collisions": {
"absorb": {
"speed": 2
},
"bounce": {
"horizontal": {
"value": 1
},
"vertical": {
"value": 1
}
},
"enable": false,
"maxSpeed": 50,
"mode": "bounce",
"overlap": {
"enable": true,
"retries": 0
}
},
"color": {
"value": "#ff0000",
"animation": {
"h": {
"count": 0,
"enable": false,
"speed": 1,
"decay": 0,
"delay": 0,
"sync": true,
"offset": 0
},
"s": {
"count": 0,
"enable": false,
"speed": 1,
"decay": 0,
"delay": 0,
"sync": true,
"offset": 0
},
"l": {
"count": 0,
"enable": false,
"speed": 1,
"decay": 0,
"delay": 0,
"sync": true,
"offset": 0
}
}
},
"effect": {
"close": true,
"fill": true,
"options": {},
"type": {}
},
"groups": [],
"move": {
"angle": {
"offset": 0,
"value": 90
},
"attract": {
"distance": 200,
"enable": false,
"rotate": {
"x": 3000,
"y": 3000
}
},
"center": {
"x": 50,
"y": 50,
"mode": "percent",
"radius": 0
},
"decay": 0,
"distance": {},
"direction": "none",
"drift": 0,
"enable": true,
"gravity": {
"acceleration": 9.81,
"enable": false,
"inverse": false,
"maxSpeed": 50
},
"path": {
"clamp": true,
"delay": {
"value": 0
},
"enable": false,
"options": {}
},
"outModes": {
"default": "out",
"bottom": "out",
"left": "out",
"right": "out",
"top": "out"
},
"random": false,
"size": false,
"speed": 2,
"spin": {
"acceleration": 0,
"enable": false
},
"straight": false,
"trail": {
"enable": false,
"length": 10,
"fill": {}
},
"vibrate": false,
"warp": false
},
"number": {
"density": {
"enable": true,
"width": 1920,
"height": 1080
},
"limit": {
"mode": "delete",
"value": 0
},
"value": 80
},
"opacity": {
"value": {
"min": 0.1,
"max": 0.5
},
"animation": {
"count": 0,
"enable": true,
"speed": 3,
"decay": 0,
"delay": 0,
"sync": false,
"mode": "auto",
"startValue": "random",
"destroy": "none"
}
},
"reduceDuplicates": false,
"shadow": {
"blur": 0,
"color": {
"value": "#000"
},
"enable": false,
"offset": {
"x": 0,
"y": 0
}
},
"shape": {
"close": true,
"fill": true,
"options": {},
"type": "circle"
},
"size": {
"value": {
"min": 0.1,
"max": 5
},
"animation": {
"count": 0,
"enable": true,
"speed": 20,
"decay": 0,
"delay": 0,
"sync": false,
"mode": "auto",
"startValue": "random",
"destroy": "none"
}
},
"stroke": {
"width": 0
},
"zIndex": {
"value": 0,
"opacityRate": 1,
"sizeRate": 1,
"velocityRate": 1
},
"destroy": {
"bounds": {},
"mode": "none",
"split": {
"count": 1,
"factor": {
"value": 3
},
"rate": {
"value": {
"min": 4,
"max": 9
}
},
"sizeOffset": true,
"particles": {}
}
},
"roll": {
"darken": {
"enable": false,
"value": 0
},
"enable": false,
"enlighten": {
"enable": false,
"value": 0
},
"mode": "vertical",
"speed": 25
},
"tilt": {
"value": 0,
"animation": {
"enable": false,
"speed": 0,
"decay": 0,
"sync": false
},
"direction": "clockwise",
"enable": false
},
"twinkle": {
"lines": {
"enable": true,
"frequency": 0.005,
"opacity": 1,
"color": {
"value": "#ff0000"
}
},
"particles": {
"enable": true,
"frequency": 0.05,
"opacity": 1,
"color": {
"value": "#ffff00"
}
}
},
"wobble": {
"distance": 5,
"enable": false,
"speed": {
"angle": 50,
"move": 10
}
},
"life": {
"count": 0,
"delay": {
"value": 0,
"sync": false
},
"duration": {
"value": 0,
"sync": false
}
},
"rotate": {
"value": 0,
"animation": {
"enable": false,
"speed": 0,
"decay": 0,
"sync": false
},
"direction": "clockwise",
"path": false
},
"orbit": {
"animation": {
"count": 0,
"enable": false,
"speed": 1,
"decay": 0,
"delay": 0,
"sync": false
},
"enable": false,
"opacity": 1,
"rotation": {
"value": 45
},
"width": 1
},
"links": {
"blink": false,
"color": {
"value": "#ffffff"
},
"consent": false,
"distance": 150,
"enable": true,
"frequency": 1,
"opacity": 0.4,
"shadow": {
"blur": 5,
"color": {
"value": "#000"
},
"enable": false
},
"triangles": {
"enable": false,
"frequency": 1
},
"width": 1,
"warp": false
},
"repulse": {
"value": 0,
"enabled": false,
"distance": 1,
"duration": 1,
"factor": 1,
"speed": 1
}
},
"pauseOnBlur": true,
"pauseOnOutsideViewport": true,
"responsive": [],
"smooth": false,
"style": {},
"themes": [],
"zLayers": 100,
"key": "twinkle",
"name": "Twinkle",
"motion": {
"disable": false,
"reduce": {
"factor": 4,
"value": true
}
}
}
官方在线生成器
原文链接:https://code.ifrontend.net/archives/700,转载请注明出处。
评论0