#星计划# HarmonyOS 鸿蒙 ArkTS 模仿雷达动画效果 原创

 
 
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State qidong: boolean = false
  @State num: number = 0
 
  onPageShow (): void {
 
    this.qidong = true
    console.log ( '页面触发', this.qidong )
 
    animateTo ( {
      duration: 2000,
      iterations: -1,
      curve:Curve.Linear
 
    }, () => {
       this.num = 360
    } )
 
  }
 
  build () {
    Row () {
 
      Stack ( { alignContent: Alignment.Center } ) { //重叠居中
        //最外层的圈
        Column () {}
        .width ( 150 )
        .height ( 150 )
        .backgroundColor ( 'rgba(0,0,0,0)' )
        .opacity ( 0.1 ) //透明
        .borderRadius ( 100 ) //圆角
        .shadow ( { radius: 50, color: '#000000' } ) //阴影
        .border ( { width: 1, color: '#ffffff', style: BorderStyle.Dashed } ) //边框
        .zIndex ( 1 )
        //中间的圈
        Column () {}
        .width ( 100 )
        .height ( 100 )
        .linearGradient (
          {
            angle: 180,
            colors: [['rgba(0,0,0,0.25)', 0.1], ["rgba(0,0,0,0.25)", 0.6]]
          } )
        .opacity ( 0.1 )
        .border ( { width: 1, color: '#c0dbe0', style: BorderStyle.Solid } ) //边框
        .borderRadius ( 100 ) //圆角
        .zIndex ( 2 )
 
        //最里面的圈
        Column () {}
        .width ( 50 )
        .height ( 50 )
        .opacity ( 0.1 )
        .linearGradient ( //渐变色
          {
            angle: 180,
            colors: [['rgba(0,0,0,0.25)', 0.1], ["rgba(0,0,0,0.25)", 0.6]]
          } )
        .border ( { width: 1, color: '#c0dbe0', style: BorderStyle.Solid } ) //边框
        .borderRadius ( 100 ) //圆角
        .zIndex ( 5 )
 
        //旋转光
        Column(){}
        .width ( 70 )
        .height ( 70 )
        .margin ( { bottom: 70,left:70 } )
        .borderRadius({topRight:70})
        .shadow ( { radius:150, color: '#2e8b57'} ) //阴影
        .backgroundColor('#2e8b57')
        .opacity ( 0.7 ) //透明
        .zIndex ( 7 )
        .rotate ( {
          x: 0,
          y: 0,
          z: 1,
          angle: this.num,
          centerX:0,
          centerY:70,
        } )
 
      }
      .height ( '100%' )
      .width ( '100%' )
      .backgroundColor ( '#212121' )
 
    }
 
  }
}
 
 
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.