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),
                );
              },
            )),
      ),
    );
  }
}
相关推荐
MakeZero33 分钟前
Flutter那些事-GridView
flutter·dart
Gorit10 小时前
使用 AI + Flutter-OH 开发 HarmonyOS 应用
人工智能·flutter·harmonyos
啥都想学点10 小时前
从 Flutter 前端到 Spring Boot 后端：2026 年技术栈落地路线图（实战版）
前端·spring boot·flutter
西西学代码1 天前
Flutter---回调函数
开发语言·javascript·flutter
圣光SG1 天前
Vue.js 从入门到精通：技术成长之路
flutter
恋猫de小郭1 天前
Swift 6.3 正式发布支持 Android ，它能在跨平台发挥什么优势？
android·前端·flutter
i-阿松！1 天前
PCB板子+ flutter前端 + go后端
物联网·flutter·pcb工艺·go1.19
恋猫de小郭1 天前
Flutter 3.41.6 版本很重要，你大概率需要更新一下
android·前端·flutter
亚历克斯神2 天前
Flutter for OpenHarmony: Flutter 三方库 mutex 为鸿蒙异步任务提供可靠的临界资源互斥锁（并发安全基石）
android·数据库·安全·flutter·华为·harmonyos
热门推荐
012026年3月AI领域大事件：DeepSeek引领开源风暴02GitHub 镜像站点03围棋-html版本04纯 HTML/CSS/JS 实现的高颜值登录页，还会眨眼睛！少女心爆棚！05OpenClaw 使用和管理 MCP 完全指南06安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）07Mac 本地部署 OMLX + 通义千问 Qwen3.5-27B 保姆级教程08班级宠物园部署指南09“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）10Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services