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;  
}