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;  
}
相关推荐
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第三章 拖拽seriesItem至displayer上显示第一张dicom
前端·javascript·cornerstone·cornerstone3d·cornerstonejs
gnip6 小时前
Jst执行上下文栈和变量对象
前端·javascript
excel6 小时前
🐣 最简单的卷积与激活函数指南(带示例)
前端
醉方休7 小时前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
拉不动的猪7 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do7 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
奇舞精选7 小时前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南
前端·人工智能·aigc
奇舞精选7 小时前
Nano Banana 如何为前端注入 AI 控制力
前端·aigc
一支鱼7 小时前
基于 Node.js 的短视频制作神器 ——FFCreator
前端·node.js·音视频开发
DT——7 小时前
前端登录鉴权详解
前端·javascript