Flutter 中的粒子动画：实现烟花效果

Flutter 中的粒子动画：实现烟花效果

5 回复

使用ParticleSystem库，配置初速度、加速度等参数模拟烟花爆炸。

更多关于Flutter 中的粒子动画：实现烟花效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中实现烟花效果，可以使用 CustomPainter 和 AnimationController 创建粒子动画，通过随机生成粒子的位置、颜色和速度来模拟烟花爆炸效果。

在 Flutter 中实现烟花效果，可以使用 CustomPainter 和粒子系统。首先，创建一个粒子类，包含位置、速度、颜色等属性。然后，在 CustomPainter 的 paint 方法中，更新粒子的位置并绘制它们。通过随机生成粒子的初始位置和速度，可以模拟烟花爆炸的效果。最后，使用 AnimationController 控制动画的更新和重绘。这样可以实现逼真的烟花动画。

使用Flutter的Animation和ParticleSystem库来创建烟花效果。

在Flutter中实现烟花效果可以通过使用CustomPainter和动画控制器来绘制粒子动画。以下是一个简单的示例，展示如何实现烟花效果：

1. 创建粒子类

首先，定义一个粒子类，用于表示每个烟花粒子：

class Particle {
  Offset position;
  Offset velocity;
  double size;
  Color color;
  double lifespan;

  Particle({
    required this.position,
    required this.velocity,
    required this.size,
    required this.color,
    required this.lifespan,
  });

  bool isDead() => lifespan <= 0;

  void update() {
    position += velocity;
    lifespan -= 1;
  }
}

2. 创建烟花类

接下来，定义一个烟花类，用于管理多个粒子：

class Firework {
  List<Particle> particles = [];

  Firework(Offset position) {
    for (int i = 0; i < 100; i++) {
      particles.add(Particle(
        position: position,
        velocity: Offset((Random().nextDouble() - 0.5) * 4, (Random().nextDouble() - 0.5) * 4),
        size: Random().nextDouble() * 3 + 1,
        color: Color.fromARGB(255, Random().nextInt(255), Random().nextInt(255), Random().nextInt(255)),
        lifespan: Random().nextInt(100) + 50,
      ));
    }
  }

  void update() {
    particles.removeWhere((particle) => particle.isDead());
    particles.forEach((particle) => particle.update());
  }

  void draw(Canvas canvas) {
    particles.forEach((particle) {
      final paint = Paint()..color = particle.color;
      canvas.drawCircle(particle.position, particle.size, paint);
    });
  }
}

3. 使用 CustomPainter 绘制烟花

创建一个 CustomPainter 来绘制烟花：

class FireworkPainter extends CustomPainter {
  List<Firework> fireworks = [];

  FireworkPainter({required this.fireworks});

  @override
  void paint(Canvas canvas, Size size) {
    fireworks.forEach((firework) => firework.draw(canvas));
  }

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

4. 使用 AnimationController 控制动画

最后，使用 AnimationController 来控制动画的更新和重绘：

class FireworkAnimation extends StatefulWidget {
  @override
  _FireworkAnimationState createState() => _FireworkAnimationState();
}

class _FireworkAnimationState extends State<FireworkAnimation> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  List<Firework> fireworks = [];

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 10),
    )..repeat();

    _controller.addListener(() {
      setState(() {
        fireworks.forEach((firework) => firework.update());
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (details) {
        setState(() {
          fireworks.add(Firework(details.localPosition));
        });
      },
      child: CustomPaint(
        painter: FireworkPainter(fireworks: fireworks),
        size: Size.infinite,
      ),
    );
  }
}

5. 在主界面中使用

在你的 main.dart 中使用这个动画：

void main() => runApp(MaterialApp(
  home: Scaffold(
    body: FireworkAnimation(),
  ),
));

总结

通过以上步骤，你可以在Flutter中实现一个简单的烟花效果。每个烟花由多个粒子组成，粒子会根据速度和生命周期进行移动和消失。你可以通过点击屏幕来触发新的烟花效果。

回到顶部