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

put_get

2024-12-26 15:50:36

浏览

回答 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)

  }
}