自定义圆圈动画组件

@Entry
@Component
export struct mAnimationComponent {
  @State private Scale: number = 1
  @State private Opacity: number = 1
  //点的宽度
  @Prop widths : number = 0
  //旋转角度
  @Prop rotates :number = 360
  build() {
    Column() {
      Stack({ alignContent: Alignment.Center }) {
        Stack({ alignContent: Alignment.Top }) {
          //圆圈
          Circle()
            .width(200)
            .height(200)
            .stroke('rgba(255,255,255,0.3)')
            .fill(Color.Transparent)
            .strokeWidth(1)
          //圆圈上的点
          Row()
            .width(this.widths)
            .height(this.widths)
            .borderRadius(this.widths / 2)
            .translate({ x: 0, y: 200 - this.widths / 2 })
            //径渐变
            .radialGradient({
              center: [this.widths / 2, this.widths / 2],
              radius: this.widths * 0.6,
              colors: [['#ffffff', 0], ['#ffffff', 0.1],['#00ffffff', 1]]
            })
        }
        .scale({ x: this.Scale, y: this.Scale })
        .opacity(this.Opacity)
        .animation({
          duration: 3000,
          curve: Curve.EaseOut,
          iterations: 1,
          delay: 0,
          playMode: PlayMode.Normal
        })
        .rotate({
          angle: this.rotates
        })
        .animation({
          duration: 20000,
          iterations: -1,
          playMode: PlayMode.Normal,
          curve: Curve.Linear,
        })
      }
      .width('100%')
      .height('100%')
      .backgroundColor(Color.Pink)
      .onAppear(() => {
        // 触发状态变化启动动画
        this.Scale = 1.5
        this.Opacity = 0
        this.rotates = 0
      })
    }
  }
}