1

entry/src/main/ets/pages/compontents/imageBtn.ets

@@ -0,0 +1,75 @@
+@Component
+export default struct imageBtn {
+  //状态变量unPressed，用于控制按钮的状态
+  @State unPressed: boolean = true
+  btnWidth: string
+  btnHeight: string
+  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
+        })
+      }
+    })
+  }
+}