Svelte -用户点击屏幕时生成一系列飞出的粒子
示例：粒子系统
创建一个简单的粒子系统，这个系统会在用户点击屏幕时生成一系列飞出的粒子。使用 Svelte 的响应式声明（$:）和状态管理来保持系统的简洁高效。
1. 创建一个新的 Svelte 组件 ParticleSystem.svelte
<script>import { onMount } from 'svelte';// 定义粒子数组let particles = [];// 粒子对象function createParticle(x, y) {return {x,y,velocity: { x: (Math.random() - 0.5) * 2, y: (Math.random() - 0.5) * 2 },life: 1.0};}// 更新函数function updateParticles() {particles = particles.map(particle => {particle.x += particle.velocity.x;particle.y += particle.velocity.y;particle.life -= 0.01; // 每帧减少生命值return particle;}).filter(particle => particle.life > 0); // 移除已经死亡的粒子}// 添加新的粒子function addParticles(event) {const rect = event.target.getBoundingClientRect();for (let i = 0; i < 10; i++) {particles.push(createParticle(event.clientX - rect.left,event.clientY - rect.top));}}// 设置更新循环onMount(() => {const animationFrame = () => {requestAnimationFrame(animationFrame);updateParticles();};animationFrame(); // 启动动画});
</script><style>.particle {position: absolute;width: 5px;height: 5px;background: rgba(255, 255, 255, 0.8);border-radius: 50%;pointer-events: none; /* 防止粒子干扰鼠标事件 */}
</style><div on:click={addParticles} style="position: relative; width: 100%; height: 300px; background: #000;">{#each particles as particle (particle)}<divclass="particle"style={`left: ${particle.x}px; top: ${particle.y}px; opacity: ${particle.life};`}></div>{/each}
</div>在这个例子中：
- 定义
particles数组来存储所有活动的粒子。 createParticle函数用于根据给定的位置创建一个新的粒子。updateParticles函数每帧都会被调用，会更新每个粒子的位置，并降低它们的生命值。如果粒子的生命值降到0以下，则从数组中移除该粒子。- 当用户点击画布时，
addParticles函数会在点击位置附近生成一组新的粒子。 - 使用
onMount生命周期钩子来设置一个连续的动画循环，这样即使在没有用户输入的情况下，粒子也会持续更新。 - 在样式部分，为粒子设置了基础的CSS样式，包括绝对定位、大小、背景色以及圆形边界。
{#each}指令用于遍历particles数组，并为每个粒子渲染一个<div>元素，其位置和透明度基于粒子的状态。