Flutter粒子效果：Canvas绘制技巧

原创 于 2025-09-24 14:07:38 发布 · 246 阅读 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

Flutter粒子效果：Canvas绘制技巧

概述

在移动应用开发中，视觉效果是提升用户体验的关键因素之一。粒子效果作为一种动态视觉表现形式，广泛应用于游戏、动画、交互反馈等场景。Flutter作为跨平台UI框架，通过其强大的Canvas API为开发者提供了实现高性能粒子效果的能力。本文将深入探讨如何利用Flutter的Canvas API创建各种粒子效果，从基础绘制到高级动画技巧，帮助开发者掌握这一强大的视觉表现工具。

Flutter Canvas基础

Canvas与CustomPainter

Flutter提供了CustomPainter类，允许开发者直接操作底层Canvas进行绘制。CustomPainter是一个抽象类，需要实现paint方法和shouldRepaint方法。其中，paint方法接收一个Canvas对象和Size对象，开发者可以通过Canvas对象的各种绘制方法实现自定义图形。

class PointsPainter extends CustomPainter {
  PointsPainter(this.tick);

  final double tick;

  @override
  void paint(Canvas canvas, Size size) {
    // 绘制逻辑
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

上述代码展示了一个基本的CustomPainter实现，来自dev/benchmarks/macrobenchmarks/lib/src/draw_points.dart。通过继承CustomPainter，并重写paint方法，我们可以获得Canvas对象的控制权。

粒子绘制基础

粒子效果的核心是绘制大量独立运动的微小元素。在Flutter中，可以使用drawPoints或drawRawPoints方法高效绘制多个点。以下是一个简单的粒子绘制示例：

void paint(Canvas canvas, Size size) {
  canvas.drawPaint(Paint()..color = Colors.white);
  
  final Float32List points = Float32List(8000);
  // 填充点数据
  for (int i = 0; i < points.length; i += 2) {
    points[i] = Random().nextDouble() * size.width;
    points[i+1] = Random().nextDouble() * size.height;
  }
  
  final Paint paint = Paint()
    ..color = Colors.blue
    ..strokeWidth = 3
    ..strokeCap = StrokeCap.round;
    
  canvas.drawRawPoints(PointMode.points, points, paint);
}

这段代码创建了一个包含4000个随机分布点的粒子系统，使用蓝色圆形笔触绘制在白色背景上。drawRawPoints方法接受一个PointMode参数，用于指定点的绘制模式，可以是points(独立点)、lines(线段)或polygon(多边形)。

粒子系统设计

粒子数据结构

一个完整的粒子系统需要管理大量粒子的状态，包括位置、速度、加速度、生命周期等。为了高效存储和更新粒子数据，可以使用Float32List等TypedData结构：

class ParticleSystem {
  final Float32List particles; // 存储粒子数据: x, y, vx, vy, size, life
  int count;
  
  ParticleSystem(int maxParticles) : particles = Float32List(maxParticles * 6), count = 0;
  
  void addParticle(double x, double y) {
    if (count * 6 >= particles.length) return;
    
    particles[count * 6] = x; // x位置
    particles[count * 6 + 1] = y; // y位置
    particles[count * 6 + 2] = Random().nextDouble() * 2 - 1; // vx速度
    particles[count * 6 + 3] = Random().nextDouble() * 2 - 1; // vy速度
    particles[count * 6 + 4] = Random().nextDouble() * 2 + 1; // 大小
    particles[count * 6 + 5] = 1.0; // 生命周期
    
    count++;
  }
  
  void update() {
    for (int i = 0; i < count; i++) {
      final index = i * 6;
      // 更新位置
      particles[index] += particles[index + 2];
      particles[index + 1] += particles[index + 3];
      // 减少生命周期
      particles[index + 5] -= 0.01;
      
      // 移除生命周期结束的粒子
      if (particles[index + 5] <= 0) {
        // 将最后一个粒子移到当前位置
        particles[index] = particles[(count - 1) * 6];
        particles[index + 1] = particles[(count - 1) * 6 + 1];
        particles[index + 2] = particles[(count - 1) * 6 + 2];
        particles[index + 3] = particles[(count - 1) * 6 + 3];
        particles[index + 4] = particles[(count - 1) * 6 + 4];
        particles[index + 5] = particles[(count - 1) * 6 + 5];
        count--;
        i--;
      }
    }
  }
}

这种数据结构设计可以高效地管理大量粒子，减少对象创建和垃圾回收的开销。

粒子发射系统

粒子系统通常需要一个发射源来控制粒子的生成位置、方向和密度。以下是一个简单的圆形区域发射器实现：

class ParticleEmitter {
  final ParticleSystem system;
  Offset position;
  double radius;
  int emissionRate;
  
  ParticleEmitter({
    required this.system,
    required this.position,
    this.radius = 10,
    this.emissionRate = 10,
  });
  
  void emit() {
    for (int i = 0; i < emissionRate; i++) {
      // 在圆形区域内随机位置
      final angle = Random().nextDouble() * 2 * pi;
      final distance = Random().nextDouble() * radius;
      final x = position.dx + cos(angle) * distance;
      final y = position.dy + sin(angle) * distance;
      
      system.addParticle(x, y);
    }
  }
}

高级绘制技巧

粒子形状多样化

除了简单的圆点，我们还可以通过组合Canvas绘制方法创建各种形状的粒子：

void drawParticle(Canvas canvas, double x, double y, double size, Color color) {
  final Paint paint = Paint()..color = color;
  
  // 圆形粒子
  canvas.drawCircle(Offset(x, y), size, paint);
  
  // 方形粒子
  // canvas.drawRect(Rect.fromCenter(center: Offset(x, y), width: size*2, height: size*2), paint);
  
  // 星形粒子
  // Path path = Path();
  // // 绘制星形路径...
  // canvas.drawPath(path, paint);
}

颜色和透明度变化

通过HSV颜色空间可以创建丰富的粒子颜色效果：

Color getParticleColor(double life) {
  // 从红色到蓝色的渐变，随生命周期变化透明度
  final hue = (360 * (1 - life)) % 360;
  return HSVColor.fromAHSV(life, hue, 0.8, 0.8).toColor();
}

性能优化策略

  1. 减少绘制调用：使用drawRawPoints代替多次drawCircle调用
  2. 对象池化：复用粒子对象，避免频繁创建和销毁
  3. 视口剔除：只更新和绘制可见区域内的粒子
  4. 分级渲染：根据粒子大小或重要性调整渲染精度

以下是一个优化的粒子绘制实现：

void paintParticles(Canvas canvas, ParticleSystem system) {
  // 按大小分组绘制，减少Paint对象切换
  final List<List<int>> sizeGroups = List.generate(5, (_) => []);
  
  // 分组
  for (int i = 0; i < system.count; i++) {
    final index = i * 6;
    final size = system.particles[index + 4];
    final groupIndex = (size - 1).clamp(0, 4).toInt();
    sizeGroups[groupIndex].add(i);
  }
  
  // 绘制每个组
  for (int group = 0; group < sizeGroups.length; group++) {
    final size = group + 1;
    final paint = Paint()
      ..strokeWidth = size.toDouble()
      ..strokeCap = StrokeCap.round;
      
    final points = Float32List(sizeGroups[group].length * 2);
    int pointIndex = 0;
    
    for (final i in sizeGroups[group]) {
      final index = i * 6;
      final x = system.particles[index];
      final y = system.particles[index + 1];
      final life = system.particles[index + 5];
      
      // 设置颜色
      paint.color = HSVColor.fromAHSV(life, 360 * (1 - life), 0.8, 0.8).toColor();
      
      points[pointIndex++] = x;
      points[pointIndex++] = y;
    }
    
    canvas.drawRawPoints(PointMode.points, points, paint);
  }
}

完整示例

以下是一个完整的Flutter粒子效果实现，结合了上述所有技巧：

import 'dart:math';
import 'dart:ui';
import 'package:flutter/material.dart';

class ParticleSystem {
  final Float32List particles;
  int count;
  final int maxParticles;
  
  ParticleSystem(this.maxParticles) 
    : particles = Float32List(maxParticles * 6), 
      count = 0;
  
  void addParticle(double x, double y) {
    if (count >= maxParticles) return;
    
    final angle = Random().nextDouble() * 2 * pi;
    final speed = Random().nextDouble() * 2 + 1;
    
    particles[count * 6] = x; // x
    particles[count * 6 + 1] = y; // y
    particles[count * 6 + 2] = cos(angle) * speed; // vx
    particles[count * 6 + 3] = sin(angle) * speed; // vy
    particles[count * 6 + 4] = Random().nextDouble() * 2 + 1; // size
    particles[count * 6 + 5] = 1.0; // life
    
    count++;
  }
  
  void update() {
    for (int i = 0; i < count; i++) {
      final index = i * 6;
      
      // 更新位置
      particles[index] += particles[index + 2];
      particles[index + 1] += particles[index + 3];
      
      // 应用重力
      particles[index + 3] += 0.1;
      
      // 减少生命周期
      particles[index + 5] -= 0.01;
      
      // 生命周期结束，用最后一个粒子替换
      if (particles[index + 5] <= 0) {
        if (count > 0) {
          particles[index] = particles[(count - 1) * 6];
          particles[index + 1] = particles[(count - 1) * 6 + 1];
          particles[index + 2] = particles[(count - 1) * 6 + 2];
          particles[index + 3] = particles[(count - 1) * 6 + 3];
          particles[index + 4] = particles[(count - 1) * 6 + 4];
          particles[index + 5] = particles[(count - 1) * 6 + 5];
          count--;
        }
      }
    }
  }
}

class ParticlePainter extends CustomPainter {
  final ParticleSystem system;
  final ParticleEmitter emitter;
  final double time;
  
  ParticlePainter(this.system, this.emitter, this.time) : super(repaint: null);
  
  @override
  void paint(Canvas canvas, Size size) {
    // 清屏
    canvas.drawPaint(Paint()..color = Colors.black);
    
    // 发射新粒子
    emitter.emit();
    
    // 更新粒子
    system.update();
    
    // 按大小分组绘制
    final List<List<int>> sizeGroups = List.generate(5, (_) => []);
    
    for (int i = 0; i < system.count; i++) {
      final index = i * 6;
      final size = system.particles[index + 4];
      final groupIndex = (size - 1).clamp(0, 4).toInt();
      sizeGroups[groupIndex].add(i);
    }
    
    for (int group = 0; group < sizeGroups.length; group++) {
      if (sizeGroups[group].isEmpty) continue;
      
      final size = group + 1;
      final paint = Paint()
        ..strokeWidth = size.toDouble()
        ..strokeCap = StrokeCap.round;
      
      final points = Float32List(sizeGroups[group].length * 2);
      int pointIndex = 0;
      
      for (final i in sizeGroups[group]) {
        final index = i * 6;
        points[pointIndex++] = system.particles[index];
        points[pointIndex++] = system.particles[index + 1];
      }
      
      // 设置颜色
      final hue = (time * 20) % 360;
      paint.color = HSVColor.fromAHSV(0.8, hue, 0.8, 0.8).toColor();
      
      canvas.drawRawPoints(PointMode.points, points, paint);
    }
  }
  
  @override
  bool shouldRepaint(covariant ParticlePainter oldDelegate) {
    return true;
  }
}

class ParticleEmitter {
  final ParticleSystem system;
  Offset position;
  double radius;
  int emissionRate;
  
  ParticleEmitter({
    required this.system,
    required this.position,
    this.radius = 10,
    this.emissionRate = 5,
  });
  
  void emit() {
    for (int i = 0; i < emissionRate; i++) {
      final angle = Random().nextDouble() * 2 * pi;
      final distance = Random().nextDouble() * radius;
      final x = position.dx + cos(angle) * distance;
      final y = position.dy + sin(angle) * distance;
      
      system.addParticle(x, y);
    }
  }
}

class ParticleDemo extends StatefulWidget {
  @override
  _ParticleDemoState createState() => _ParticleDemoState();
}

class _ParticleDemoState extends State<ParticleDemo> 
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late ParticleSystem _particleSystem;
  late ParticleEmitter _emitter;
  
  @override
  void initState() {
    super.initState();
    
    _particleSystem = ParticleSystem(1000);
    _emitter = ParticleEmitter(
      system: _particleSystem,
      position: Offset(250, 250),
      emissionRate: 10,
    );
    
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    )..repeat();
  }
  
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return CustomPaint(
            size: Size(500, 500),
            painter: ParticlePainter(
              _particleSystem,
              _emitter,
              _controller.value,
            ),
          );
        },
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: ParticleDemo()));

应用场景与扩展

交互粒子效果

通过监听用户触摸事件，可以创建交互式粒子效果：

class InteractiveParticleDemo extends StatefulWidget {
  @override
  _InteractiveParticleDemoState createState() => _InteractiveParticleDemoState();
}

class _InteractiveParticleDemoState extends State<InteractiveParticleDemo> 
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late ParticleSystem _particleSystem;
  late ParticleEmitter _emitter;
  Offset _emitterPosition = Offset(250, 250);
  
  @override
  void initState() {
    super.initState();
    
    _particleSystem = ParticleSystem(1000);
    _emitter = ParticleEmitter(
      system: _particleSystem,
      position: _emitterPosition,
      emissionRate: 5,
    );
    
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    )..repeat();
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onPanUpdate: (details) {
          setState(() {
            _emitterPosition = details.localPosition;
            _emitter.position = _emitterPosition;
          });
        },
        child: AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            return CustomPaint(
              size: MediaQuery.of(context).size,
              painter: ParticlePainter(
                _particleSystem,
                _emitter,
                _controller.value,
              ),
            );
          },
        ),
      ),
    );
  }
}

性能优化进阶

对于更复杂的粒子效果，可以考虑以下高级优化技术：

  1. 使用Compute isolate：在后台线程计算粒子位置
  2. 硬件加速：利用Flutter的硬件加速渲染管道
  3. 纹理粒子：使用drawAtlas方法绘制预渲染的粒子纹理

总结

Flutter的Canvas API为实现高性能粒子效果提供了强大的基础。通过合理设计粒子系统、优化绘制流程和应用高级动画技巧，开发者可以创建出视觉震撼的动态效果。本文介绍的技术不仅适用于粒子效果，也可应用于其他复杂自定义绘制场景。

官方文档：docs/engine/Flutter-engine-operation-in-AOT-Mode.md

示例代码：dev/benchmarks/macrobenchmarks/lib/src/draw_points.dart

希望本文能够帮助开发者掌握Flutter Canvas绘制技巧，创造出更加丰富的视觉体验。如有任何问题或建议，欢迎在项目仓库中提出issue或PR。

参考资料

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值