Flutter 代码雨实现(矩阵雨)DLC 爆炸粒子

前情提要来自作者上一步的代码雨

此文章是上一篇的dlc,新添加爆炸粒子效果

实现原理是在消散时加上粒子爆炸的效果

怎么实现粒子爆炸的效果

和雨滴一样,粒子也要有一个类来存储状态

dart 复制代码
// 粒子 爆炸后的  
class Particle {  
  Offset position;  
  Offset velocity;  
  double alpha = 1.0;  
  int lifespan;  
  int age = 0;  
  
  Particle({  
    required this.position,  
    required this.velocity,  
    required this.lifespan,  
  });  
  
  void update() {  
    position += velocity;  
    age++;  
    alpha = (1.0 - age / lifespan).clamp(0.0, 1.0);  
  }  
  
  bool get isDead => age >= lifespan;  
}

来分析一下属性

  • position 位置
  • velocity 速度
  • alpha 角度
  • lifespan 生命周期
  • age 当前生命 update方法用来实时更新爆炸粒子的状态,以及随机角度alpha = (1.0 - age / lifespan).clamp(0.0, 1.0); bool get isDead => age >= lifespan; 当当前生命age大于生命周期lifespan时,粒子死亡isDead

至此,一个粒子的类就创建好了

接下来是在哪去使用这个粒子,粒子牵扯到雨滴的位置,所以粒子不用去单独创建一个manage管理类,而是和雨滴共用一个管理类去实现 在原先的RainManager 中添加final List<Particle> particles = []; 以及新的方法

explodeAt() 粒子爆炸

dart 复制代码
void explodeAt(double x, double y) {  
  for (int i = 0; i < 10; i++) {  
    final angle = random.nextDouble() * 2 * pi;  
    final speed = 1 + random.nextDouble() * 2;  
    final velocity = Offset(cos(angle), sin(angle)) * speed;  
    particles.add(  
      Particle(  
        position: Offset(x, y),  
        velocity: velocity,  
        lifespan: 60,  
      ),  
    );  
  }  
}

那么粒子该什么时候出现,怎么去更新状态呢 当然还是依靠雨滴,只有当雨滴超出屏幕消失时出发消散才会有粒子爆炸(==当然也增加更多的触发条件,但本质上还是和雨滴依依相靠==) 所以爆炸粒子的生成放在了雨滴的更新里

dart 复制代码
void update() {  
  for (final drop in drops) {  
    drop.y += drop.speed;  
    drop.frameCount++;  
  
    // 超出屏幕时触发爆散  
    if (drop.y > size.height) {  
      explodeAt(drop.x, drop.y);  
      drop.x = random.nextDouble() * size.width;  
      drop.y = 0;  
      drop.speed = 1 + random.nextDouble() * 2;  
      drop.frameCount = drop.frameOffset;  
    }  
  }  
  
  // 更新粒子  
  for (final particle in particles) {  
    particle.update();  
  }
  //移除死亡的粒子  
  particles.removeWhere((p) => p.isDead);  
}

那粒子的绘制也是放在雨滴的绘制里

dart 复制代码
void paint(Canvas canvas, Size size) {
// 绘制雨滴
for (final drop in manager.drops) {  
...
}




// 绘制粒子  
for (final particle in manager.particles) {  
  paint.color = Colors.green.withOpacity(particle.alpha);  
  canvas.drawCircle(particle.position, 1.5, paint);  
}
...
}
相关推荐
你听得到1121 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
哲科软件10 小时前
跨平台开发的抉择:Flutter vs 原生安卓(Kotlin)的优劣对比与选型建议
android·flutter·kotlin
天涯海风10 小时前
Kuikly 与 Flutter 的全面对比分析,结合技术架构、性能、开发体验等核心维度
flutter·kuikly
aiprtem10 小时前
基于Flutter的web登录设计
前端·flutter
coder_pig14 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
程序员老刘16 小时前
Android 16开发者全解读
android·flutter·客户端
Jalor17 小时前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos
吴Wu涛涛涛涛涛Tao19 小时前
一步到位:用 Very Good CLI × Bloc × go_router 打好 Flutter 工程地基
flutter·ios
九丝城主19 小时前
2025使用VM虚拟机安装配置Macos苹果系统下Flutter开发环境保姆级教程--中篇
服务器·flutter·macos·vmware
ITfeib20 小时前
Flutter
开发语言·javascript·flutter