同心圆及点击动画，ArkTs如何画同心圆以及同心圆的点击动画效果

import Curves from '@ohos.curves'; 
 
@Entry 
@Component 
struct Index { 
  @State currentColor:string = 'blue' 
  @State flagColor:boolean = false; 
 
  @State widthSize:number = 50; 
  @State heightSize:number = 50; 
  @State flag:boolean = false; 
  @State curveTxt:string = '弹性动画曲线' 
  @State currentCurve:ICurve = Curves.springMotion(1,1,0) 
  @State curveIndex:number = 0; 
  @State curveColor:string = 'blue' 
  build() { 
    Row() { 
      Column({space:100}){ 
        //画一个直径为90的同心圆 
        //方式一： 
        Column() { 
          Circle({ 
            width: 50, 
            height: 50 
          }) 
            .fill(this.currentColor) 
            .position({x:25,y:25})  //绝对定位 
            .onClick(()=>{ 
              if(!this.flagColor){ 
                this.currentColor = 'red' 
                this.flagColor = !this.flagColor 
              }else{ 
                this.currentColor = 'blue' 
                this.flagColor = !this.flagColor 
              } 
            }) 
        } 
        .width('100') 
        .height('100') 
        .backgroundColor('#ffffff') 
        .border({  //border的宽度是向内的，宽度越大占用内部空间越大 
         color:Color.Blue, 
          width:10, 
          radius:100 
        }) 
 
        // 方式二 
        Text(this.curveTxt) 
        // Text('Index:' + this.curveIndex) 
        Stack(){ 
          Circle({ width: 90, height: 90 }) 
            .fillOpacity(0) 
            .stroke('blue')  //边框颜色 
            .strokeWidth(10)  //边框宽度，向外，不会占用内部空间 
          Circle() 
            .fill(this.curveColor) 
            .onClick(()=>{ 
              if(!this.flag){ 
                this.widthSize = 60; 
                this.heightSize = 60; 
                if(this.curveIndex % 4 == 0){ 
                  this.curveColor = 'red' 
                  //构造弹性动画曲线对象  参数(弹簧自然振动周期,阻尼系数,弹性动画衔接时长) 
                  this.currentCurve = Curves.springMotion(1,1,0); 
                  this.curveTxt = '弹性动画曲线' 
                  this.curveIndex++; 
                }else if(this.curveIndex % 4 == 1){ 
                  this.curveColor = '#ffff00' 
                  //构造弹簧曲线对象  参数(初始速度,质量,刚度,阻尼) 
                  this.currentCurve = Curves.springCurve(-1000,2,1000,1000) 
                  this.curveTxt = '弹簧曲线' 
                  this.curveIndex++; 
                }else if(this.curveIndex % 4 == 2){ 
                  this.curveColor = 'green' 
                  //构造阶梯曲线对象  参数(阶梯数量,起点或终点发生越阶变化,true为终点发生) 
                  this.currentCurve = Curves.stepsCurve(1,true) 
                  this.curveTxt = '阶梯曲线' 
                  this.curveIndex++; 
                }else{ 
                  this.curveColor = '#808080' 
                  //构造三阶贝塞尔曲线对象，曲线的值必须处于0-1之间 
                  this.currentCurve = Curves.cubicBezierCurve(1,0,1,0) 
                  this.curveTxt = '三阶贝塞尔曲线' 
                  this.curveIndex++; 
                } 
                this.flag = !this.flag; 
              }else{ 
                this.widthSize = 50; 
                this.heightSize = 50; 
                this.flag = !this.flag; 
              } 
            }) 
            .width(this.widthSize) 
            .height(this.heightSize) 
            .animation({ 
              duration : 1000, 
              curve:this.currentCurve, 
              playMode: PlayMode.Normal 
            }) 
        } 
      } 
      .width('100%') 
      .height('100%') 
      .justifyContent(FlexAlign.Center) 
    } 
    .height('100%') 
  } 
}
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.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.