Flutter动画—雷达扫描效果

AiFlutter2024-09-11 20:50

前言

我们现在要用Flutter做一个雷达扫描的动画,如下图所示

需求分析

  • 需要在画布上画出三个同心圆和一个十字
  • 创建一个固定角度的圆弧
  • 圆弧做渐变色
  • 让圆弧动起来
  • 封装组件，将圆弧角度、圆弧颜色、几个同心圆与十字颜色

实现步骤

1.创建一3个同心圆与十字

复制代码 
class RingPainter extends CustomPainter {
  RingPainter();
  final double angle = 0;
  final Color radarViewColor = Colors.pink; //雷达扫描指针的颜色
  final int circleCount = 3; //雷达扫描添加瞄准的环数,暂时注销了
 
  final Paint _paint = Paint()..style = PaintingStyle.fill;
 
  @override
  void paint(Canvas canvas, Size size) {
    var radius = min(size.width / 2, size.height / 2);
    Paint _bgPaint = Paint()
      ..color = radarViewColor
      ..strokeWidth = 1
      ..style = PaintingStyle.stroke;
    //十字架部分
    canvas.drawLine(
      Offset(size.width / 2, size.height / 2 - radius),
      Offset(size.width / 2, size.height / 2 + radius),
      _bgPaint,
    );
    canvas.drawLine(
      Offset(size.width / 2 - radius, size.height / 2),
      Offset(size.width / 2 + radius, size.height / 2),
      _bgPaint,
    );
    //同心圆部分
    for (var i = 1; i <= circleCount; ++i) {
      canvas.drawCircle(Offset(size.width / 2, size.height / 2),
          radius * i / circleCount, _bgPaint);
    }
    canvas.save();
    canvas.restore();
  }
 
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}
 
 
class TextLiany extends StatefulWidget {
  const TextLiany({super.key});
 
  @override
  State<TextLiany> createState() => _TextLianyState();
}
 
class _TextLianyState extends State<TextLiany> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
            width: 300,
            height: 300,
            // child: RadarView(),
            child: CustomPaint(
              painter: RingPainter(),
            )),
      ),
    );
  }
}

2.修改RingPainter类，画出一个90°圆弧，并且旋转30°

复制代码 
class RingPainter extends CustomPainter {
  RingPainter();
  final double angle = pi / 180 * 10;
  final Color radarViewColor = Colors.pink; //雷达扫描指针的颜色
  final int circleCount = 3; //雷达扫描添加瞄准的环数,暂时注销了
 
  final Paint _paint = Paint()..style = PaintingStyle.fill;
 
  @override
  void paint(Canvas canvas, Size size) {
    var radius = min(size.width / 2, size.height / 2);
    Paint _bgPaint = Paint()
      ..color = radarViewColor
      ..strokeWidth = 1
      ..style = PaintingStyle.stroke;
    //十字架部分
    canvas.drawLine(
      Offset(size.width / 2, size.height / 2 - radius),
      Offset(size.width / 2, size.height / 2 + radius),
      _bgPaint,
    );
    canvas.drawLine(
      Offset(size.width / 2 - radius, size.height / 2),
      Offset(size.width / 2 + radius, size.height / 2),
      _bgPaint,
    );
    //同心圆部分
    for (var i = 1; i <= circleCount; ++i) {
      canvas.drawCircle(Offset(size.width / 2, size.height / 2),
          radius * i / circleCount, _bgPaint);
    }
    canvas.save();
    double r = sqrt(pow(size.width, 2) + pow(size.height, 2));
    double startAngle = atan(size.height / size.width);
    Point p0 = Point(r * cos(startAngle), r * sin(startAngle));
    Point px = Point(r * cos(angle + startAngle), r * sin(angle + startAngle));
    canvas.translate((p0.x - px.x) / 2, (p0.y - px.y) / 2);
    canvas.rotate(angle);
    canvas.drawArc(
        Rect.fromCircle(
            center: Offset(size.width / 2, size.height / 2), radius: radius),
        0,
        pi / 180 * 90,
        true,
        _paint);
    canvas.restore();
  }
 
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

3.给圆弧设置渐变色，只需要给_paint添加渐变色即可

复制代码 
_paint.shader = ui.Gradient.sweep(
       Offset(size.width / 2, size.height / 2),
       [radarViewColor.withOpacity(.01), radarViewColor.withOpacity(.5)],
       [.0, 1.0],
       TileMode.clamp,
       .0,
       pi / 180 * 30);

class RingPainter extends CustomPainter {
  RingPainter();
  final double angle = pi / 180 * 10;
  final Color radarViewColor = Colors.pink; //雷达扫描指针的颜色
  final int circleCount = 3; //雷达扫描添加瞄准的环数,暂时注销了
 
  final Paint _paint = Paint()..style = PaintingStyle.fill;
 
  @override
  void paint(Canvas canvas, Size size) {
    var radius = min(size.width / 2, size.height / 2);
    Paint _bgPaint = Paint()
      ..color = radarViewColor
      ..strokeWidth = 1
      ..style = PaintingStyle.stroke;
    //十字架部分
    canvas.drawLine(
      Offset(size.width / 2, size.height / 2 - radius),
      Offset(size.width / 2, size.height / 2 + radius),
      _bgPaint,
    );
    canvas.drawLine(
      Offset(size.width / 2 - radius, size.height / 2),
      Offset(size.width / 2 + radius, size.height / 2),
      _bgPaint,
    );
    //同心圆部分
    for (var i = 1; i <= circleCount; ++i) {
      canvas.drawCircle(Offset(size.width / 2, size.height / 2),
          radius * i / circleCount, _bgPaint);
    }
    _paint.shader = ui.Gradient.sweep(
        Offset(size.width / 2, size.height / 2),
        [radarViewColor.withOpacity(.01), radarViewColor.withOpacity(.5)],
        [.0, 1.0],
        TileMode.clamp,
        .0,
        pi / 180 * 30);
    canvas.save();
    double r = sqrt(pow(size.width, 2) + pow(size.height, 2));
    double startAngle = atan(size.height / size.width);
    Point p0 = Point(r * cos(startAngle), r * sin(startAngle));
    Point px = Point(r * cos(angle + startAngle), r * sin(angle + startAngle));
    canvas.translate((p0.x - px.x) / 2, (p0.y - px.y) / 2);
    canvas.rotate(angle);
    canvas.drawArc(
        Rect.fromCircle(
            center: Offset(size.width / 2, size.height / 2), radius: radius),
        0,
        pi / 180 * 90,
        true,
        _paint);
    canvas.restore();
  }
 
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

4.创建动画，然后将旋转角度的angle从固定值转换成动画数值即可

复制代码 
class RingPainter extends CustomPainter {
  RingPainter({this.angle = pi / 180 * 10});
  final double angle;
  final Color radarViewColor = Colors.pink; //雷达扫描指针的颜色
  final int circleCount = 3; //雷达扫描添加瞄准的环数,暂时注销了
 
  final Paint _paint = Paint()..style = PaintingStyle.fill;
 
  @override
  void paint(Canvas canvas, Size size) {
    var radius = min(size.width / 2, size.height / 2);
    Paint _bgPaint = Paint()
      ..color = radarViewColor
      ..strokeWidth = 1
      ..style = PaintingStyle.stroke;
    //十字架部分
    canvas.drawLine(
      Offset(size.width / 2, size.height / 2 - radius),
      Offset(size.width / 2, size.height / 2 + radius),
      _bgPaint,
    );
    canvas.drawLine(
      Offset(size.width / 2 - radius, size.height / 2),
      Offset(size.width / 2 + radius, size.height / 2),
      _bgPaint,
    );
    //同心圆部分
    for (var i = 1; i <= circleCount; ++i) {
      canvas.drawCircle(Offset(size.width / 2, size.height / 2),
          radius * i / circleCount, _bgPaint);
    }
    _paint.shader = ui.Gradient.sweep(
        Offset(size.width / 2, size.height / 2),
        [radarViewColor.withOpacity(.01), radarViewColor.withOpacity(.5)],
        [.0, 1.0],
        TileMode.clamp,
        .0,
        pi / 180 * 30);
    canvas.save();
    double r = sqrt(pow(size.width, 2) + pow(size.height, 2));
    double startAngle = atan(size.height / size.width);
    Point p0 = Point(r * cos(startAngle), r * sin(startAngle));
    Point px = Point(r * cos(angle + startAngle), r * sin(angle + startAngle));
    canvas.translate((p0.x - px.x) / 2, (p0.y - px.y) / 2);
    canvas.rotate(angle);
    canvas.drawArc(
        Rect.fromCircle(
            center: Offset(size.width / 2, size.height / 2), radius: radius),
        0,
        pi / 180 * 90,
        true,
        _paint);
    canvas.restore();
  }
 
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}
 
 
class _TextLianyState extends State<TextLiany>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;
  @override
  void initState() {
    _controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 3));
    _animation = Tween(begin: .0, end: pi * 2).animate(_controller);
    _controller.repeat();
    super.initState();
  }
 
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
            width: 300,
            height: 300,
            // child: RadarView(),
            child: AnimatedBuilder(
              animation: _animation,
              builder: (context, child) {
                return CustomPaint(
                  painter: RingPainter(angle: _animation.value),
                );
              },
            )),
      ),
    );
  }
}
相关推荐
SoaringHeart2 小时前
Flutter组件封装：翻转组件 NFlipCard
前端·flutter
明君879974 小时前
说说我为什么放弃使用 GetX，转而使用 flutter_bloc + GetIt
前端·flutter
程序员老刘6 小时前
Flutter版本选择指南：3.41开始进入稳定区间 | 2026年3月
flutter·ai编程·客户端
王码码20356 小时前
Flutter 三方库 sparky 的鸿蒙化适配指南 - 实现极简 2D 游戏引擎功能、支持高效精灵图渲染与跨端游戏逻辑
flutter·harmonyos·鸿蒙·openharmony
恋猫de小郭8 小时前
Android 17 新适配要求，各大权限进一步收紧，适配难度提升
android·前端·flutter
tangweiguo030519878 小时前
Flutter SSE 流式接收完全指南：从原理到实战
flutter
西西学代码10 小时前
Flutter---文件存储
flutter
林九生10 小时前
【Flutter】Flutter 拍照/相册选择后无法显示对话框问题解决方案
前端·javascript·flutter
●VON11 小时前
Flutter组件通信详解：父子组件交互的最佳实践
javascript·flutter·华为·交互·harmonyos·von
热门推荐
012026年3月AI领域大事件：DeepSeek引领开源风暴02GitHub 镜像站点03围棋-html版本04小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）05班级宠物园部署指南06Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南07【计算机一级WPSoffice】小黑课堂题库软件下载安装教程（2026年3月最新版）08UV安装并设置国内源09OpenClaw 使用和管理 MCP 完全指南10“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）