【鸿蒙实战开发】HarmonyOS 基于ArkUI(ETS) 实现雷达扫描

本文链接：https://blog.youkuaiyun.com/niumadeshijie/article/details/141036456

前言

雷达扫描是一个比较有科技感的东西，对于科幻迷来说，科幻电影里基本都能看到的画面，一个大大的屏幕上,可以看到雷达扫描的绿幕效果。
下面我们使用三种方式来实现这样的雷达效果。

项目说明

工具版本：DevEco Studio 3.0 Release
SDK版本：3.1.1.2（API Version 8 Release）
主要组件：canvas, Row, Image

效果

使用Image图片组件方式实现
使用canvas组件实现
使用Row组件的渐变属性实现

实现过程

需要注意，一个页面里只能有一个@Entry修饰符，所以，下面三种方法在预览的时候，需要注意注释只保留一个@Entry

1. 使用Image方法实现

使用Image组件的方法是最简单的，直接制作两张图片，一张底图，一张扫描的图

将两张图片通过叠加，将扫描的图片通过圆心宣旋转即可，下面使用代码来实现

@Entry
@Component
struct RadarImg {
  @State angle:number = 0;
  aboutToAppear(){
    setTimeout(()=>{
      this.angle = 360
    },200)
  }
  build(){
    Row(){
      Stack(){
        Image($r("app.media.radar_grid"))
          .width(300)
          .height(300)
        Image($r('app.media.radar_sector'))
          .width(300)
          .height(300)
          .rotate({
            z: 1,
            angle: this.angle
          })
          .animation({
            duration: 2000,
            curve:Curve.Linear,
            iterations: -1,
          })
      }
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor(0x111111)
    .width('100%')
    .height('100%')
  }
}

整体比较简单，旋转主要用到了animation属性，这些在官网API文档可以查看。虽然使用Image组件实现比较简单，但是却是可以实现一些复杂的雷达UI。