fishfish/features/feature/src/main/ets/view/FragranceView.ets

import { AppStorageKeyFishCollect, YTHeader, yTRouter, YTUserRequest } from 'basic';
import { promptAction } from '@kit.ArkUI';

@Component
export struct FragranceView{
  // @StorageProp(AppStorageKeyFishCollect.TEXTARR)
  // @State
  // textArr:string[]=['xxxx','xxxx','xxxx','xxx','xxxx','xxxx']
  private averageAngle: number = 0
  private radius1: number = 50
  private radius2: number =1
  private img: number = 90
  private isRotate:boolean = true;//按下暂停转动
  @State widAr:Array<number> = [this.radius1,this.radius1,this.radius1,this.radius1,this.radius1]
  @State heiAr:Array<number> = [this.radius2,this.radius2,this.radius2,this.radius2,this.radius2]
  @State rotateAngle: number = 0

  private intervalID = setInterval(()=> {//每0.1秒执行5°的转动，动画更平滑

    for (let index = 0; index < 6; index++) {
      let doubleAngle = (this.averageAngle -60 * index + 0) * Math.PI / 180
      let sin = Math.sin(doubleAngle);
      let cos = Math.cos(doubleAngle);
      this.widAr[index] =this.radius1+this.radius1*cos
      this.heiAr[index] =this.radius2+this.radius2*sin * Math.cos(Math.PI * 5 / 18)
    }

    if (this.isRotate) {
      if (this.averageAngle<360) {//0~360°循环
        this.averageAngle+=1
      }else {
        this.averageAngle = 0;
      }
      this.rotateAngle = 360
    }


  }, 100)

  imagesThree: ImageFrameInfo[] =Array.from<string>({length:20}).map<ImageFrameInfo>((v:string,index:number)=>{
    return {
      src: $r(`app.media.three_Fra_${index+1}`),
    }
  })
  imagesOne: ImageFrameInfo[] =Array.from<string>({length:20}).map<ImageFrameInfo>((v:string,index:number)=>{
    return {
      src: $r(`app.media.one_Fra_${index+1}`),
    }
  })
  images2: ImageFrameInfo[] =Array.from<string>({length:5}).map<ImageFrameInfo>((v:string,index:number)=>{
    return {
      src: $r(`app.media.huo${index+1}`),
    }
  })

  image3: ImageFrameInfo[] =Array.from<string>({length:25}).map<ImageFrameInfo>((v:string,index:number)=>{
    return {
      src: $r(`app.media.fragrance${index+1}`),
    }
  })


  @State state:AnimationStatus = AnimationStatus.Initial

  @State moveY:number=0

  //燃烧时间
  @State time:number=-1
  //烧香数量
  @State num:number=1



  @State interId:number=0
  @State isShow:boolean=false


  //获取香烟数量和燃烧时间
  updateNumAndTime(){
    YTUserRequest.getFishFra((res)=>{
      const time=res.incenseTime as number
      if(time==10){
        this.time=10
      }else if(time==30){
        this.time=30
      }else {
        this.time=-1
      }
      const num=res.incenseNum as number
      if(num==1){
        this.num=1
      }else{
        this.num=3
      }

      //测试时间
      this.time=1

    })
  }

  //计算香烟位置，启动动画

  caluePosition(){
    clearInterval(this.interId)
    this.moveY=0
    this.state=AnimationStatus.Stopped


    //显示烟
    this.isShow=true
    //香缩减动画开始
    this.state=AnimationStatus.Running

    //位移计算
    this.moveY=0
    if(this.time!=-1) {
      this.interId = setInterval(() => {
        this.moveY = this.moveY + 8
      }, this.time * 60000 / 20)
    }

  }


  aboutToAppear(): void {

    this.updateNumAndTime()
    this.caluePosition()

    // if(this.textArr.length==0){
    //   this.textArr.push('诸事顺遂')
    // }
    //
    // this.widAr=[]
    // this.heiAr=[]
    // this.textArr.forEach((item)=>{
    //   this.widAr.push(this.radius1)
    //   this.heiAr.push(this.radius2)
    // })
  }

  aboutToDisappear() {
    clearInterval(this.intervalID);
  }



  build() {
    Column(){
      //文字环绕
      Stack() {
        Image($r('[basic].media.dengguang')).width('100%').height('100%')
        Image($r('[basic].media.dizuo')).width(256).height(60).margin({top:450})


        Stack({alignContent:Alignment.Top}) {
          RelativeContainer() {
            // ForEach(this.textArr,(item:string,index:number)=>{
            //   Column() {
            //     Text(item)
            //       .width(this.img)
            //       .height(this.img)
            //       .fontColor(Color.White)
            //   }.position({ x: this.widAr[index], y: this.heiAr[index] })
            // })
            Column() {
              Text('天天吃饭')
                .fontSize(20)
                .width(this.img)
                .height(this.img)
                .fontColor(Color.White)

            }.position({ x: this.widAr[0], y: this.heiAr[0] })


            Column() {
              Text('天天向上')
                .fontSize(20)
                .width(this.img)
                .height(this.img)
                .fontColor(Color.White)

            }.position({ x: this.widAr[1], y: this.heiAr[1] })

            Column() {
              Text('清纯男大')
                .fontSize(20)
                .width(this.img)
                .height(this.img)
                .fontColor(Color.White)

            }.position({ x: this.widAr[2], y: this.heiAr[2] })

            Column() {
              Text('官人梧州')
                .fontSize(20)
                .width(this.img)
                .height(this.img)
                .fontColor(Color.White)

            }.position({ x: this.widAr[3], y: this.heiAr[3] })

            Column() {
              Text('年年岁岁')
                .fontSize(20)
                .width(this.img)
                .height(this.img)
                .fontColor(Color.White)

            }.position({ x: this.widAr[4], y: this.heiAr[4] })
            Column() {
              Text('平平安安')
                .fontSize(20)
                .width(this.img)
                .height(this.img)
                .fontColor(Color.White)

            }.position({ x: this.widAr[5], y: this.heiAr[5] })

          }.width(300)
          .height(350)
          .margin({top:44,left:20})
          .onAreaChange((oldValue: Area, newValue: Area) => {
            this.radius1 = new Number(newValue.width).valueOf() / 3
            this.radius2 = new Number(newValue.height).valueOf() / 4
          })
        }.width('100%')
        .height('100%')

      Stack(){
          //一根香烟
          if(this.num==1){
            ImageAnimator()
              .width('100%')
              .height('100%')
              // .animatorFancy()// 抽取公共属性
              .images(this.imagesOne)// 动画数组 十秒
              .duration(this.time==-1?9999999:this.time*60000)
              // .duration(this.imagesOne.length * 500*this.time)// 持续
              .state(this.state)// 动画状态
              .iterations(-1) // 播放次数

            //三更香烟
          }else {
            ImageAnimator()
              .width('100%')
              .height('100%')
              // .animatorFancy()// 抽取公共属性
              .images(this.imagesThree)// 动画数组 //十秒
              .duration(this.time==-1?9999999:this.time*60000)
              // .duration(this.imagesThree.length * 500*this.time)// 持续
              .state(this.state)// 动画状态
              .iterations(-1) // 播放次数
          }


        //火
        ImageAnimator()
          .width('100%')
          .height('100%')
          // .animatorFancy()// 抽取公共属性
          .images(this.images2)// 动画数组
          .duration(this.images2.length * 100)// 持续
          .state(AnimationStatus.Running)// 动画状态
          .iterations(-1) // 播放次数


        //烟显示
        if(this.isShow) {
          if(this.num==1) {
            Stack() {
              ImageAnimator()
                .width('100%')
                .height('100%')
                .images(this.image3)// 动画数组
                .duration(this.image3.length * 100)// 持续
                .state(AnimationStatus.Running)// 动画状态
                .iterations(-1) // 播放次数
              // ImageAnimator()
              //   .width('100%')
              //   .height('100%')
              //     // .animatorFancy()// 抽取公共属性
              //   .images(this.images2)// 动画数组
              //   .duration(this.images2.length * 100)// 持续
              //   .state(AnimationStatus.Running)// 动画状态
              //   .iterations(-1) // 播放次数


            }.width('100%')
            .height('100%')
            .translate({
              y: this.moveY
            })

          }else {
            Stack() {
              ImageAnimator()
                .width('100%')
                .height('100%')
                .images(this.image3)// 动画数组
                .duration(this.image3.length * 100)// 持续
                .state(AnimationStatus.Running)// 动画状态
                .iterations(-1) // 播放次数

              ImageAnimator()
                .width('100%')
                .height('100%')
                .margin({ right: 35 })
                .images(this.image3)// 动画数组
                .duration(this.image3.length * 100)// 持续
                .state(AnimationStatus.Running)// 动画状态
                .iterations(-1) // 播放次数

              ImageAnimator()
                .width('100%')
                .height('100%')
                .margin({ left: 35 })
                .images(this.image3)// 动画数组
                .duration(this.image3.length * 100)// 持续
                .state(AnimationStatus.Running)// 动画状态
                .iterations(-1) // 播放次数

              // ImageAnimator()
              //   .width('100%')
              //   .height('100%')
              //     // .animatorFancy()// 抽取公共属性
              //   .images(this.images2)// 动画数组
              //   .duration(this.images2.length * 100)// 持续
              //   .state(AnimationStatus.Running)// 动画状态
              //   .iterations(-1) // 播放次数


            }.width('100%')
            .height('100%')
            .translate({
              y: this.moveY
            })
          }
        }

        // 按钮控制区域
        Row(){
          Button('xxx').onClick(()=>{
            this.time=1
            this.caluePosition()
          })
        }
        // Row({space:20}){
        //   Button('启动').onClick(()=>{
        //     this.isShow=true
        //     this.state=AnimationStatus.Running
        //     this.interId=setInterval(()=>{
        //       //2秒，20张，170 0.1秒一----10
        //       //20秒 20张 170 1秒一张 0.9
        //       //60秒  20张 170 3秒一张 170
        //       //另外一种解决办法，根据照片的分布来设置位置position
        //       //170 20张 第一张170 第二张160，10分钟，每半分钟一个状态移动位置
        //       this.time=this.time+1
        //       this.moveY=this.moveY+this.time*1
        //     },1000)
        //     setTimeout(()=>{
        //       clearInterval(this.interId)
        //       this.isShow=false
        //     },20000)
        //
        //   })
        //   Button('暂停').onClick(()=>{
        //     this.state=AnimationStatus.Paused
        //   })
        //   Button('停止').onClick(()=>{
        //     this.state=AnimationStatus.Stopped
        //     this.moveY=0
        //     this.time=0
        //     this.isShow=false
        //     clearTimeout(this.interId)
        //   })
        //   Button('XX').onClick(()=>{
        //     promptAction.showToast({
        //       message:this.moveY.toString()
        //     })
        //   })
        //   // Button('xxxxx').onClick(()=>{
        //   //
        //   // })
        // }
      }

        Row(){
          Column(){

          }.width(24).height(24)

          Row({space:32}){
            Text(`30:00`).fontColor($r('[basic].color.login_main_yellow'))

            Text('重置')
              .borderRadius(20)
              .padding({
                left: 6,
                right: 6,
                top: 4,
                bottom: 4
              })
              .backgroundColor($r('[basic].color.login_main_yellow'))
              .fontColor(Color.Black)
              .onClick(() => {
              })
          }
          Image($r('[basic].media.shezhix')).width(24).onClick(()=>{
            yTRouter.router2FragranceSettingPage()
          })
        }.width('100%')
        .margin({bottom:640})
        .padding({left:16,right:16})
        .justifyContent(FlexAlign.SpaceBetween)
      }.width('100%')
      .height('100%')
    }.width('100%')
    .height('100%')
    .backgroundColor(Color.Black)
    .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
      console.info('IsaKit Test Text isVisible: ' + isVisible + ', currentRatio:' + currentRatio)
      if (isVisible) {
       this.updateNumAndTime()
        this.caluePosition()
      }
    })
  }
}