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;  
}
相关推荐
How_doyou_do25 分钟前
样式冲突修复组件
前端·javascript·html
IT_陈寒29 分钟前
SpringBoot实战:这5个高效开发技巧让我节省了50%编码时间!
前端·人工智能·后端
isixe29 分钟前
Uniapp IOS 和 Android 下的文件写入用户目录
前端·uni-app
蓝莓味的口香糖35 分钟前
【npm】npm命令大全
前端·npm·node.js
我是天龙_绍36 分钟前
uniapp一个关于自定义导航栏高度计算的问题
前端
彭一36 分钟前
uniapp评论弹窗
前端
**之火40 分钟前
中止 Web 请求新方式 - AbortController API
开发语言·前端·javascript
我有一棵树1 小时前
如何优雅的布局,height: 100% 的使用和 flex-grow: 1 的 min-height 陷阱
前端·css·html
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,微信小程序页面交互 —— 知识点详解与案例实现(3)
前端·javascript·学习·react.js·微信小程序·小程序·交互
石小石Orz1 小时前
思考许久,我还是提交了离职申请
前端