Flutter 代码雨实现(矩阵雨)DLC 多图层

全新dlc 多图层,远近中三个图层分别代表不同的明暗程度和下落速度来表现出层次感

相比之下这个dlc也是创建了一个全新的类来管理多图层LayeredRainManager

LayeredRainManager

dart 复制代码
/// 多图层管理器  
class LayeredRainManager {  
  final List<RainManager> layers;  
  final List<double> speedFactors;  
  final List<double> brightnessFactors;  
  
  LayeredRainManager({  
    required int layerCount,  
    required int dropsPerLayer,  
    required String charSet,  
    required Size size,  
  })  : layers = [],  
        speedFactors = [],  
        brightnessFactors = [] {  
    for (int i = 0; i < layerCount; i++) {  
      final speed = (1.0 - i * 0.3).clamp(0.3, 1.0);
      final brightness = (1.0 - i * 0.3).clamp(0.3, 1.0);  
      layers.add(RainManager(charSet: charSet, dropCount: dropsPerLayer)  
        ..setSize(size));  
      speedFactors.add(speed);  
      brightnessFactors.add(brightness);  
    }  
  }  
  
  void update() {  
    for (int i = 0; i < layers.length; i++) {  
      layers[i].update(scale: speedFactors[i]);  
    }  
  }  
}
  • layerCount 第X图层
  • dropsPerLayer 每个图层雨滴数量
  • charSet 文字
  • size 画布大小
  • layers 图层
  • speedFactors 速度因子
  • brightnessFactors 亮度因子
图层 速度 亮度 描述
0 快(1.0) 亮(1.0) 近景图层
1 中(0.7) 中(0.7) 中景图层
2 慢(0.4) 暗(0.4) 远景图层

传参案例

dart 复制代码
final size = ui.window.physicalSize / ui.window.devicePixelRatio;  
  
_layeredManager = LayeredRainManager(  
  layerCount: 3,  
  dropsPerLayer: 30,  
  charSet: '01',  
  size: size,  
);

根据传参案例来进一步分析多图层的实现方法 在传入参数后多图层管理器LayeredRainManager会自动去处理数据,分成多个图层

dart 复制代码
for (int i = 0; i < layerCount; i++) {  
  final speed =(1.0 - i * 0.3).clamp(0.3, 1.0);
  final brightness = (1.0 - i * 0.3).clamp(0.3, 1.0);  
  layers.add(RainManager(charSet: charSet, dropCount: dropsPerLayer)  
    ..setSize(size));  
  speedFactors.add(speed);  
  brightnessFactors.add(brightness);  
}

处理后可以得到三个图层

图层 速度 亮度 描述
0 快(1.0) 亮(1.0) 近景图层
1 中(0.7) 中(0.7) 中景图层
2 慢(0.4) 暗(0.4) 远景图层

多图层绘制 LayeredRainPainter 由于新增多个图层,所以绘制方法也会有所改变 具体的主要改动还是在传参, RainManager变成了LayeredRainManager

绘制方法也多进行了一个遍历

dart 复制代码
for (int i = 0; i < manager.layers.length; i++) {  

  final rain = manager.layers[i];  
  final brightnessFactor = manager.brightnessFactors[i];


  for (final drop in rain.drops){...}//原有的遍历雨滴


}
dart 复制代码
/// 绘制多层字符雨  
class LayeredRainPainter extends CustomPainter {  
  final LayeredRainManager manager;  
  final double charSize;  
  final Animation<double> repaint;  
  
  LayeredRainPainter({  
    required this.manager,  
    required this.charSize,  
    required this.repaint,  
  }) : super(repaint: repaint);  
  
  @override  
  void paint(Canvas canvas, Size size) {  
    final Paint paint = Paint();  
  
    for (int i = 0; i < manager.layers.length; i++) {  
      final rain = manager.layers[i];  
      final brightnessFactor = manager.brightnessFactors[i];  
  
      for (final drop in rain.drops) {  
        final count = drop.frameCount.clamp(1, 10);  
        for (int j = 0; j < count; j++) {  
          final brightness = (1.0 - j * 0.1) * brightnessFactor;  
          final color = HSVColor.fromAHSV(1.0, 120, 1.0, brightness).toColor();  
          final textPainter = TextPainter(  
            text: TextSpan(  
              text: '0',  
              style: TextStyle(  
                fontSize: charSize,  
                color: color,  
                fontWeight: FontWeight.bold,  
              ),  
            ),  
            textDirection: TextDirection.ltr,  
          )..layout();  
  
          textPainter.paint(canvas, Offset(drop.x, drop.y + j * charSize));  
        }  
      }  
    }  
  }  
  
  @override  
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;  
}
相关推荐
中微子1 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z1 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录1 小时前
虚拟DOM
前端·vue.js·dom
爱学习的茄子1 小时前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神1 小时前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
摆烂为不摆烂1 小时前
😁深入JS(五): 一文让你完全理解 hash 与 history 路由,手写前端路由
前端
1024小神1 小时前
cocos游戏开发中,如何制作一个空气墙
前端·javascript
爱编程的喵1 小时前
深入理解JavaScript事件循环机制:从同步到异步的完整解析
前端·javascript
20261 小时前
11. vite打包优化
前端·javascript·vite
拾光拾趣录1 小时前
组件封装的⼀些基本准则
前端·前端工程化