flutter如何实现粒子动画

在Flutter中如何实现粒子动画效果？想做一个类似烟花绽放或星空背景的动态效果，但不知道从何入手。是否有推荐的第三方库或原生实现方案？最好能提供简单的代码示例说明粒子发射、运动轨迹和消失的基本实现逻辑。另外，这种动画对性能影响大吗？

2 回复

Flutter中实现粒子动画常用CustomPaint和Canvas绘制。通过Particle类管理粒子位置、速度等属性，在paint方法中循环绘制粒子并更新状态。可使用AnimationController控制动画循环。

更多关于flutter如何实现粒子动画的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现粒子动画主要有以下几种方式：

1. 使用CustomPaint + 自定义绘制

class ParticleAnimation extends StatefulWidget {
  @override
  _ParticleAnimationState createState() => _ParticleAnimationState();
}

class _ParticleAnimationState extends State<ParticleAnimation>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  List<Particle> particles = [];

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 10),
    )..repeat();
    
    // 初始化粒子
    for (int i = 0; i < 50; i++) {
      particles.add(Particle());
    }
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        _updateParticles();
        return CustomPaint(
          painter: ParticlePainter(particles),
          size: Size.infinite,
        );
      },
    );
  }

  void _updateParticles() {
    for (var particle in particles) {
      particle.update();
    }
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

class Particle {
  double x = Random().nextDouble() * 400;
  double y = Random().nextDouble() * 800;
  double vx = Random().nextDouble() * 2 - 1;
  double vy = Random().nextDouble() * 2 - 1;
  double radius = Random().nextDouble() * 3 + 1;

  void update() {
    x += vx;
    y += vy;
    
    // 边界检测
    if (x < 0 || x > 400) vx = -vx;
    if (y < 0 || y > 800) vy = -vy;
  }
}

class ParticlePainter extends CustomPainter {
  final List<Particle> particles;

  ParticlePainter(this.particles);

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.fill;

    for (var particle in particles) {
      canvas.drawCircle(
        Offset(particle.x, particle.y),
        particle.radius,
        paint,
      );
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

2. 使用第三方包

推荐使用 particles_flutter 包：

dependencies:
  particles_flutter: ^1.1.0

import 'package:particles_flutter/particles_flutter.dart';

ParticleWidget(
  numberOfParticles: 100,
  particleColor: Colors.white,
  awayRadius: 100,
  awayAnimationDuration: Duration(seconds: 3),
  maxParticleSize: 8,
  isRandSize: true,
  isRandomColor: false,
  connectDots: true,
)

3. 使用Flame游戏引擎

对于更复杂的粒子系统，可以使用Flame：

dependencies:
  flame: ^1.0.0

import 'package:flame/components.dart';
import 'package:flame/game.dart';

class ParticleGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    // 添加粒子发射器
    add(ParticleSystemComponent(
      particle: CircleParticle(
        paint: Paint()..color = Colors.red,
      ),
    ));
  }
}

实现要点

  • 性能优化：控制粒子数量，避免过度绘制
  • 动画流畅性：使用AnimationController控制帧率
  • 内存管理：及时清理不需要的粒子
  • 交互性：可以结合手势实现交互式粒子效果

选择哪种方式取决于你的具体需求：简单效果用CustomPaint，快速实现用第三方包，复杂游戏效果用Flame。

回到顶部