Flutter粒子效果插件particle_field的使用

Particle Field 是一个Flutter插件，用于在UI中添加高性能的自定义粒子效果。它易于使用，只需编写简单的onTick处理器来管理粒子列表，并且架构高度可扩展。该插件利用了CustomPainter和drawAtlas以提供卓越的性能。

示例代码

以下是一个完整的示例demo，展示了如何使用ParticleField创建粒子效果：

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:particle_field/particle_field.dart';
import 'package:rnd/rnd.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Particle Field Demo',
      debugShowCheckedModeBanner: false,
      home: ParticleFieldExample(),
    );
  }
}

// 简单的"星星"粒子场。
class ParticleFieldExample extends StatelessWidget {
  const ParticleFieldExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final SpriteSheet sparkleSpriteSheet = SpriteSheet(
      image: const AssetImage('assets/particle-21x23.png'),
      frameWidth: 21,
    );

    // 创建一个简单的"星"粒子场。
    final ParticleField starField = ParticleField(
      spriteSheet: sparkleSpriteSheet,
      blendMode: BlendMode.dstIn,
      origin: Alignment.topLeft,
      onTick: (controller, elapsed, size) {
        List<Particle> particles = controller.particles;
        // 每帧添加一个新的粒子。
        particles.add(Particle(
          color: Colors.white,
          x: rnd(size.width),
          scale: rnd(0.2, 0.5),
          frame: rnd(sparkleSpriteSheet.length * 1.0).floor(),
          vy: rnd(6, 20),
        ));
        for (int i = particles.length - 1; i >= 0; i--) {
          Particle particle = particles[i];
          particle.update();
          if (!size.contains(particle.toOffset())) particles.removeAt(i);
        }
      },
    );

    // 更复杂的"彗星"粒子效果。
    final ParticleField cometParticles = ParticleField(
      spriteSheet: sparkleSpriteSheet,
      blendMode: BlendMode.dstIn,
      origin: Alignment.topCenter,
      onTick: (controller, elapsed, size) {
        List<Particle> particles = controller.particles;
        // 每次tick添加10个粒子。
        for (int i = 10; i > 0; i--) {
          particles.add(Particle(
            color: HSLColor.fromAHSL(1, rnd(180, 290), 1, 0.5).toColor(),
            x: rnd(size.width / 2) * rnd.getSign(),
            y: rnd(-10, size.height),
            vx: rnd(-2, 2),
            vy: rnd(-1, 1),
            frame: rnd.getInt(0, 10000),
            rotation: rnd(pi),
            lifespan: rnd(30, 80),
          ));
        }
        for (int i = particles.length - 1; i >= 0; i--) {
          Particle particle = particles[i];
          double ratio = particle.age / particle.lifespan;
          particle.update(
            vy: particle.vy + 0.15,
            x: particle.x * sqrt(1 - ratio * 0.15) + particle.vx,
            scale: sqrt((1 - ratio) * 4),
            frame: particle.frame + 1,
          );
          if (particle.age > particle.lifespan) particles.removeAt(i);
        }
      },
    );

    return Scaffold(
      body: DefaultTextStyle(
        style: const TextStyle(
          color: Color(0xFF110018),
          fontSize: 60,
          fontWeight: FontWeight.w900,
          letterSpacing: -6,
          height: 1,
          shadows: [Shadow(blurRadius: 8, color: Color(0xAA4400FF))],
        ),
        child: ColoredBox(
          color: const Color(0xFF110018),
          child: starField.stackBelow(
            child: Align(
              alignment: const Alignment(0, -0.67),
              child: cometParticles.stackBelow(
                child: const Text("FUN"),
                scale: 1.1,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

使用说明

1. 依赖安装：确保在pubspec.yaml文件中添加了particle_field和rnd依赖：

   dependencies:
     flutter:
       sdk: flutter
     particle_field: ^latest_version
     rnd: ^latest_version
   

2. 资源准备：将粒子图像资源（如particle-21x23.png）放置在assets目录下，并在pubspec.yaml中声明：

   assets:
     - assets/particle-21x23.png
   

3. 运行应用：执行flutter run命令启动应用，查看粒子效果。

通过上述步骤，您可以轻松地在Flutter项目中集成并使用ParticleField插件，为您的应用增添绚丽的粒子效果。