@Entry
@Component
struct Index {
  @State private angle:number = 0
  @State private imageSize:number = 1
  @State private speed:number = 5
  @State private interval:number = 0

  @Builder
  DescribeText(text:string,speed:number){
    Column(){
    Text(text + speed.toFixed(1))
      .margin(30)
      .fontSize(20)
      .fontWeight(FontWeight.Bold)
  }
  }

  build() {
    Flex({direction:FlexDirection.Column,wrap:FlexWrap.NoWrap,justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center,alignContent:FlexAlign.Center}){
      Image($r('app.media.icon'))
      .objectFit(ImageFit.Contain)
      .height(150)
      .width(150)
      .margin({top:50,bottom:150,right:16})
      .rotate({x:0,y:0,z:1,angle:this.angle,centerX:'50%',centerY:'50%'})
      .scale({x:this.imageSize,y:this.imageSize})

      Text('速度:'+ this.speed.toFixed(1))
      .fontSize(20)
      .margin({top:30})
      .fontWeight(FontWeight.Bold)

      Slider({
        value:this.speed,
        min:1,
        max:10,
        step:1,
        style:SliderStyle.OutSet
      })
      .showTips(true)
      .blockColor(Color.Brown)
      .onChange((value:number) =>{
      this.speed = value
      })

      Text('缩放大小:'+ this.imageSize.toFixed(1))
        .fontSize(20)
        .margin({top:30})
        .fontWeight(FontWeight.Bold)

      Slider({
        value:this.imageSize,
        min:0.5,
        max:2.5,
        step:0.1,
        style:SliderStyle.OutSet
      })
        .showTips(true)
        .blockColor(Color.Brown)
        .onChange((value:number) =>{
          this.imageSize = value
        })
    }
    .width('100%')
    .height('100%')




  }
  speedChange(){
    var that = this
    this.interval = setInterval(function(){
      that.angle += that.speed
    },15)
  }


  onPageShow(){
    this.speedChange()
  }
}