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)}
    <div
      class="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>元素，其位置和透明度基于粒子的状态。