HarmonyOS 基于ArkUI(ETS) 實現雷達掃描

作者：楊尚曉 2022-11-02 16:06:54

系統 OpenHarmony

通過這個雷達Demo，特別是第三種方法，可以學到了顏色漸變屬性中的三種漸變，線性漸變，徑向漸變，和角度漸變。也可以學習屬性動畫的實現。

??想了解更多關于開源的內容，請訪問：??

??51CTO 開源基礎軟件社區??

??https://ost.51cto.com??

前言

雷達掃描是一個比較有科技感的東西，對于科幻迷來說，科幻電影里基本都能看到的畫面，一個大大的屏幕上,可以看到雷達掃描的綠幕效果。
下面我們使用三種方式來實現這樣的雷達效果。

項目說明

工具版本：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組件的方法是最簡單的，直接制作兩張圖片，一張底圖，一張掃描的圖

#打卡不停更# HarmonyOS 基于ArkUI(ETS) 實現雷達掃描-開源基礎軟件社區

將兩張圖片通過疊加，將掃描的圖片通過圓心宣旋轉即可，下面使用代碼來實現

@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。

2、使用canvas實現

使用canvas實現的需要用到兩個組件，第一個是Canvas組件，用來繪制底圖網格，第二個是Row組件，使用角漸變屬性實現旋轉的扇形。
這里為什么不都使用canvas實現呢，找了一圈，canvas只有線性漸變和徑向漸變，切沒有角度漸變屬性，所以，為了方便就用了row來實現吧。
下面直接上代碼。

Row的漸變方式在下一個方法講解，最終都還是使用animation屬性動畫實現扇形的旋轉效果

@Entry
@Component
struct RadarCanvas {
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private ctx: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @State angle:number = 0
  // 繪制網格
  drawGrid = (): void => {
    let ctx = this.ctx;
    ctx.lineWidth = 1
    ctx.strokeStyle = 'green'
    // arr數組是需要繪制的底圖圈圈
    let arr:Array<number> = [150, 100, 50]
    for(let i = 0; i < arr.length; i++){
      ctx.beginPath()
      ctx.arc(150, 150, arr[i] - 0.5, 0, 2 * Math.PI)
      ctx.stroke()
    }
    // 繪制十字架
    ctx.beginPath()
    ctx.moveTo(0,150)
    ctx.lineTo(300,150)
    ctx.stroke()

    ctx.beginPath()
    ctx.moveTo(150,0)
    ctx.lineTo(150,300)
    ctx.stroke()
  }
  aboutToAppear(){
    setTimeout(()=>{
      this.angle = 360
    },200)
  }
  build(){
    Row(){
      Stack(){
        Canvas(this.ctx)
          .onReady(()=>{
            this.drawGrid()
          })
          .width(300)
          .height(300)
        Row()
          .width(300)
          .height(300)
          .borderRadius(150)
          .sweepGradient({
            center: [150,150],
            start: 0,
            end: 359,
            colors: [
              ['rgba(0,0,0,0)',0],
              ['rgba(0,0,0,0)',0.4],
              ['rgba(0,255,0,0.5)',1],
            ]
          })
          .rotate({
            z: 1,
            angle: this.angle
          })
          .animation({
            duration: 2000,
            iterations: -1,
            curve: Curve.Linear
          })
      }
    }
      .justifyContent(FlexAlign.Center)
      .backgroundColor(0x111111)
      .width('100%')
      .height('100%')
  }
}

3、使用Row組件實現

使用Row組件實現的方法稍微復雜一些，這里用到了4個Row組件，其實對于前端童鞋來說，這里可能會比較好里一些，其實就是類似通過div和css來實現的，row組件是div，其屬性是css樣式。

廢話不多說，直接上代碼開搞

（1）實現圓圈圈

首先使用徑向漸變屬性（radialGradient）來實現底部圈圈的效果
radialGradient屬性有幾個需要注意的值，radius是漸變的半徑，這里使用30。
漸變顏色colors組用了三個數據，可以看出，前兩個其實是透明度為0的。
可以理解為

第一個漸變顏色到第二個漸變顏色用了90%。
第二個漸變顏色到第三個漸變顏色，用了10%（100%-90%）。
也就是說在漸變半徑為30的情況下，有90%是透明的，只有10%是透明到green顏色的，這樣得到了一個圈圈。
然后又設置了repeating屬性(重復著色)為true。
所以在半徑為150的圓內，可以設置 150 / 3 = 5個圓圈圈。

Row()
.width(300)
.height(300)
.borderRadius(150)
.radialGradient({
    center: [150,150],
    radius: 30,
    colors: [
      ['rgba(0,0,0,0)', 0],
      ['rgba(0,0,0,0)', 0.9],
      ['green', 1],
    ],
    repeating: true,
})

我們看看效果：

#打卡不停更# HarmonyOS 基于ArkUI(ETS) 實現雷達掃描-開源基礎軟件社區

（2）實現十字架

實現十字架使用了兩個Row組件，使用線性漸變屬性（linearGradient）分別繪制了一橫一豎的效果。
可以看到顏色組colors使用了5個顏色來實現，1，2，4，5的顏色都是透明的。

第一個顏色到第二個顏色都是透明的，漸變范圍是0到49%。
第二個顏色到第三個顏色漸變范圍是50% - 49% = 1%，也就是在其50%（中間）的地方繪制了一個1%的green線條
第三個顏色到第四個顏色不變。
第三個到第五個顏色也是透明，漸變范圍也是50%。

上面繪制好之后，我們通過angle屬性將線條旋轉90度得到一個十字架。

Row()
  .width(300)
  .height(300)
  .borderRadius(150)
  .linearGradient({
    angle: 0,
    colors: [
      ['rgba(0,0,0,0)', 0],
      ['rgba(0,0,0,0)',0.49],
      ['green',0.5],
      ['rgba(0,0,0,0)',0.5],
      ['rgba(0,0,0,0)',1]
    ]
  })
Row()
  .width(300)
  .height(300)
  .borderRadius(150)
  .linearGradient({
    angle: 90,
    colors: [
      ['rgba(0,0,0,0)', 0],
      ['rgba(0,0,0,0)',0.49],
      ['green',0.5],
      ['rgba(0,0,0,0)',0.5],
      ['rgba(0,0,0,0)',1]
    ]
  })

來看看效果：

#打卡不停更# HarmonyOS 基于ArkUI(ETS) 實現雷達掃描-開源基礎軟件社區

（3）實現旋轉扇形

扇形也是用到Row組件，其角度漸變屬性（sweepGradient）來實現的。

Row()
  .width(300)
  .height(300)
  .borderRadius(150)
  .sweepGradient({
    center: [150,150],
    start: 0,
    end: 359,
    colors: [
      ['rgba(0,0,0,0)',0],
      ['rgba(0,0,0,0)',this.flag],
      ['rgba(0,255,0,0.5)',1],
    ]
  })

來看看效果：

#打卡不停更# HarmonyOS 基于ArkUI(ETS) 實現雷達掃描-開源基礎軟件社區

最后設置rotate旋轉屬性，設置旋轉軸為z軸，角度angle為動態更新，這樣animation動畫屬性才會更新。
最終代碼：
扇形的代碼：

Row()
  .width(300)
  .height(300)
  .borderRadius(150)
  .sweepGradient({
    center: [150,150],
    start: 0,
    end: 359,
    colors: [
      ['rgba(0,0,0,0)',0],
      ['rgba(0,0,0,0)',this.flag],
      ['rgba(0,255,0,0.5)',1],
    ]
  })
  .rotate({
    z: 1,
    angle: this.angle
  })
  .animation({
    duration: 2000,
    iterations: -1,
    curve: Curve.Linear
  })

這里添加一個掃描周邊設備的效果，動態設置了一個數據源，通過ForEach來動態渲染。

ForEach(this.scanData,(item: any) => {
  Column(){
    Image($r('app.media.icon'))
      .width(28)
      .height(28)
      .backgroundColor('#fff')
      .borderRadius(19)
    Text(item.name)
      .fontColor('#fff')
      .margin({top: 5})
      .fontSize(10)
  }
  .alignItems(HorizontalAlign.Center)
  .position({x: item.x, y: item.y})
  .scale({x: this.w, y: this.h})
  .animation({
    duration: 1000,
    iterations: 1,
    curve: Curve.Friction
  })
  .opacity(this.opt)
})

最終的代碼：

// 雷達掃描組件
@Entry
@Component
struct Radar {
  @State angle:number = 0;
  @State scanData: any = []
  @State w:number = 0;
  @State h:number = 0;
  @State opt:number = 1
  @State flag:number = 0.4
  aboutToAppear(){
    setTimeout(()=>{
      this.angle = 360
    },200)
    setTimeout(()=>{
      animateTo({
        duration: 1000, // 動畫時長
        curve: Curve.Linear, // 動畫曲線
        iterations: -1, // 播放次數
        playMode: PlayMode.AlternateReverse, // 動畫模式
        onFinish: () => {
          console.info('play end')
        }
      }, () => {
        this.opt = 0.3
      })
    },2000)
    setTimeout(()=>{
      this.scanData = [
        {
          id: 1,
          x: 190,
          y: 200,
          name: '空調'
        },
        {
          id: 1,
          x: 80,
          y: 240,
          name: '插座'
        },
      ]
      setTimeout(()=>{
        this.w = 1;
        this.h = 1;
      },200)
    },1000)

  }
  build(){
    Row(){
      Stack(){
        Row()
          .width(300)
          .height(300)
          .borderRadius(150)
          .radialGradient({
            center: [150,150],
            radius: 30,
            colors: [
              ['rgba(0,0,0,0)', 0],
              ['rgba(0,0,0,0)', 0.9],
              ['green', 1],
            ],
            repeating: true,
          })
        Row()
          .width(300)
          .height(300)
          .borderRadius(150)
          .linearGradient({
            angle: 0,
            colors: [
              ['rgba(0,0,0,0)', 0],
              ['rgba(0,0,0,0)',0.49],
              ['green',0.5],
              ['rgba(0,0,0,0)',0.5],
              ['rgba(0,0,0,0)',1]
            ]
          })
        Row()
          .width(300)
          .height(300)
          .borderRadius(150)
          .linearGradient({
            angle: 90,
            colors: [
              ['rgba(0,0,0,0)', 0],
              ['rgba(0,0,0,0)',0.49],
              ['green',0.5],
              ['rgba(0,0,0,0)',0.5],
              ['rgba(0,0,0,0)',1]
            ]
          })
        Row()
          .width(300)
          .height(300)
          .borderRadius(150)
          .sweepGradient({
            center: [150,150],
            start: 0,
            end: 359,
            colors: [
              ['rgba(0,0,0,0)',0],
              ['rgba(0,0,0,0)',this.flag],
              ['rgba(0,255,0,0.5)',1],
            ]
          })
          .rotate({
            z: 1,
            angle: this.angle
          })
          .animation({
            duration: 2000,
            iterations: -1,
            curve: Curve.Linear
          })
        ForEach(this.scanData,(item: any) => {
          Column(){
            Image($r('app.media.icon'))
              .width(28)
              .height(28)
              .backgroundColor('#fff')
              .borderRadius(19)
            Text(item.name)
              .fontColor('#fff')
              .margin({top: 5})
              .fontSize(10)
          }
          .alignItems(HorizontalAlign.Center)
          .position({x: item.x, y: item.y})
          .scale({x: this.w, y: this.h})
          .animation({
            duration: 1000,
            iterations: 1,
            curve: Curve.Friction
          })
          .opacity(this.opt)
        })
      }
      .width(300)
      .height(300)
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
    .backgroundColor(0x111111)
  }
}