HarmonyOS list中item的交互效果处理

点击图标，变小转圈圈等mqtt收到成功消息显示，变更√图标图标恢复原来大小。

HarmonyOS

zbw_apple

2024-10-14 09:48:59

浏览

回答 1

待解决

回答 1

按赞同

按时间

put_get

可以使用显示动画去触发，可以参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-explicit-animation-V5

可参照如下demo实现想要的效果：

import { UIContext } from '@ohos.arkui.UIContext';  
@Entry  
@Component  
struct KeyframeDemo {  
  @State myScale: number = 1.0  
  @State progressValue: number = 0  
  @State imageInfo: ResourceStr = $r('sys.media.ohos_ic_bottomsheet_close')  
  aboutToAppear() {  
  }  
  build() {  
    Stack() {  
      Column() {  
        Image(this.imageInfo)  
          .fillColor(Color.White)  
      }  
      .width(100)  
      .height(100)  
      .borderRadius(50)  
      .backgroundColor("#46B1E3")  
      .scale({ x: this.myScale, y: this.myScale })  
  
      Progress({ value: this.progressValue, total: 100, type: ProgressType.Ring })  
        .style({ strokeWidth: 2 })  
        .color(Color.Blue)  
        .width(82)  
        .visibility(this.progressValue >= 100 ? Visibility.None : Visibility.Visible)  
    }  
    .margin(100)  
    .onClick(() => {  
      this.myScale = 1  
      animateTo({  
        duration: 1000,  
        curve: Curve.EaseOut,  
        iterations: 1,  
        playMode: PlayMode.Normal,  
        onFinish: () => {  
          setInterval(() => {  
            this.progressValue = this.progressValue + 10  
            if (this.progressValue >= 100) {  
              animateTo({  
                duration: 1000,  
                curve: Curve.EaseOut,  
                iterations: 1,  
                playMode: PlayMode.Normal,  
                onFinish: () => {  
                }  
              }, () => {  
                this.myScale = 1  
                this.imageInfo = $r('sys.media.ohos_ic_public_arrow_right')  
              })  
            }  
          }, 50)  
        }  
      }, () => {  
        this.myScale = 0.8  
      })  
    })  
  }  
}