subject-two/entry/src/main/ets/pages/compontents/imageBtn.ets

@Component
export default struct imageBtn {
  //状态变量unPressed，用于控制按钮的状态
  @State unPressed: boolean = true
  btnWidth?: string | number
  btnHeight?: string | number
  imgSrc?: Resource
  opacityNum: number = 1

  @Styles
  customStyle(){
    .width('100%')
    .height('100%')
  }

  build() {
    Column() {
      Column() {
        Stack() {
          // Image($r('app.media.topB_back'))
          Row() {
            // 判断当前组件为放开状态
            if (this.unPressed) {
              // 插入Row组件，配置过渡效果
              Image(this.imgSrc)// 水波纹扩散动画：Row组件backgroundColor属性变更（#fff -> #ccc），系统插入动画过渡效果，从组建的中心点开始放大，scale{0,0}变更scale{1,1}
                .transition({
                  type: TransitionType.Insert,
                  opacity: 0,
                })
            }
            // 判断当前组件为按下状态
            else if (!this.unPressed) {
              // 插入Row组件，配置过渡效果
              Image(this.imgSrc)
                .opacity(this.opacityNum)
                .onAppear(() => {
                  // 水波纹聚拢动画：Row组件backgroundColor属性变更（#ccc -> #fff），插入动画过渡效果，scale{1,1}变化为scale{0,0}
                  animateTo({
                    duration: 500,
                    // 聚拢动画播放完成后，需要衔接扩散动画，此时Row组件backgroundColor属性变更（#fff -> #ccc），插入动画过渡效果，scale{0,0}变化为scale{1,1}
                    onFinish: () => {
                      this.opacityNum = 1
                    }
                  },
                    () => {
                      this.opacityNum = 0.2
                    })
                })
            }
            // 其他状态

          }
          .justifyContent(FlexAlign.Center)
          .alignItems(VerticalAlign.Center)
        }
        .customStyle()
      }
      .width(this.btnWidth)
      .height(this.btnHeight)
    }
    // onTouch事件，监听状态
    .onTouch((event: TouchEvent) => {
      // 当按钮按下时，更新按钮的状态（unPressed：true -> false）
      if (event.type == TouchType.Down) {
        animateTo({ duration: 400 }, () => {
          this.unPressed = !this.unPressed
        })
      }
      // 当按钮放开时，更新按钮的状态（unPressed：false -> true）
      if (event.type == TouchType.Up) {
        animateTo({ duration: 400 }, () => {
          this.unPressed = !this.unPressed
        })
      }
    })
  }
}