HarmonyOS animation动画无法生效

Image组件添加animation动画,动态改变Image的margin值,现象是margin没有动画过程,直接变成了最终值。

代码如下:

Stack({alignContent: Alignment.TopEnd }) {
         Image($r('app.media.cardscanner_scan_bar'))
           .margin({top: this.scanHeight - 20})
           .animation({duration: 1000, curve: Curve.Linear})
           .height(5)
           .width('100%')

         Image($r('app.media.cardscanner_icon_head'))
           .width(84)
           .height(102)
           .margin({right: 38, top: 39})
       }
       .width(this.scanWidth)
       .height(this.scanHeight)
       .margin({top: this.holeTop})
       .alignRules({
         middle: { anchor: '__container__', align: HorizontalAlign.Center },
         // center: { anchor: '__container__', align: VerticalAlign.Center },
       })
       .id("scanview")
HarmonyOS
2024-12-26 15:50:36
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
aquaa

参考demo:

@Entry
@Preview
@Component
struct TitleBar {
  titleMsg: ResourceStr = '设置'
  showBack: boolean = true
  onBackClick?: () => void
  @State btnRes: Resource = $r('app.media.startIcon')
  @State holeTop: number = 0
  @State scanHeight: number = 400
  @State scanWidth: number = 380
  @State sCanLineY: number = 20
  build() {
    Stack({ alignContent: Alignment.TopEnd }) {
      Image($r('app.media.startIcon'))
        .margin({ top: this.scanHeight - this.sCanLineY })
        .animation({
          duration: 3000,
          curve: Curve.Linear,
          iterations: -1,
          playMode: PlayMode.AlternateReverse,
          onFinish: () => {
            this.sCanLineY = 20
          }
        })
        .height(5)
        .width('100%')
        .backgroundColor(Color.Pink)
        .onAppear(() => {
          this.sCanLineY = 400
        })
      Image($r('app.media.startIcon'))
        .width(84)
        .height(102)
        .margin({ right: 38, top: 39 })
        .backgroundColor(Color.Red)
    }
    .width(this.scanWidth)
    .height(this.scanHeight)
    .margin({ top: this.holeTop })
    .alignRules({
      middle: { anchor: '__container__', align: HorizontalAlign.Center },
    })
    .id("scanview")
    .backgroundColor(Color.Gray)

  }
}
分享
微博
QQ
微信
回复
2024-12-26 18:14:54
相关问题
HarmonyOS animation动画停止位置不对
277浏览 • 1回复 待解决
HarmonyOS import资源无法生效
497浏览 • 1回复 待解决
HarmonyOS .clip矩形裁切无法生效
531浏览 • 1回复 待解决
HarmonyOS 本地lottie动画无法播放
989浏览 • 1回复 待解决
HarmonyOS 混淆没生效
305浏览 • 1回复 待解决
HarmonyOS expandSafeArea不生效
906浏览 • 1回复 待解决
HarmonyOS clearHistory未生效
139浏览 • 1回复 待解决