【arkts】HarmonyOS鸿蒙属性动画animation踩坑记录

【arkts】HarmonyOS鸿蒙属性动画animation踩坑记录

目标：点击方向按钮，图片小鱼设置animation属性实现平滑移动

Image($r('app.media.fish'))
          .position({x: this.fishX, y: this.fishY})
          .rotate({angle: this.angle, centerX: '50%', centerY: '50%'})
          .width(200)
          .interpolation(ImageInterpolation.High)
          .animation({duration: 1000})  //animation不生效

          Column(){
            Button('↑').backgroundColor('#20101010')
            .onClick(() => {
              this.fishY -= 20
            })
            Row({space: 40}){
              Button('←').backgroundColor('#20101010')
                .onClick(() => {
                this.fishX -= 20
              })
              Button('→').backgroundColor('#20101010')
                .onClick(() => {
                  this.fishX += 20
                })
            }
            Button('↓').backgroundColor('#20101010').onClick(() => {
              this.fishY += 20
            })
          }.position({x: 20, y: 230})

运行效果：

可以看出animation并没有起作用

Image($r('app.media.fish'))
          .position({x: this.fishX, y: this.fishY})
          .rotate({angle: this.angle, centerX: '50%', centerY: '50%'})
          .width(200)
          .height(100)  //设置height
          .interpolation(ImageInterpolation.High)
          .animation({duration: 1000})

          Column(){
            Button('↑').backgroundColor('#20101010')
            .onClick(() => {
              this.fishY -= 20
            })
            Row({space: 40}){
              Button('←').backgroundColor('#20101010')
                .onClick(() => {
                this.fishX -= 20
              })
              Button('→').backgroundColor('#20101010')
                .onClick(() => {
                  this.fishX += 20
                })
            }
            Button('↓').backgroundColor('#20101010').onClick(() => {
              this.fishY += 20
            })
          }.position({x: 20, y: 230})

运行效果：

成功解决
其他animation不生效的原因可能有animation设置在了需要有动画属性之前，也不会生效，animation最好还是写在最后

Image($r('app.media.fish'))
            .position({x: this.fishX, y: this.fishY})
            //.animation({duration: 1000})  写在这里不会生效
            .rotate({angle: this.angle, centerX: '50%', centerY: '50%'})
            .width(200)
            .height(100)
            .interpolation(ImageInterpolation.High)
            .animation({duration: 1000})  // 正确

总结：起初因为只设置width即可实现对图片等比进行缩放，所以未设置height，导致出现了animation不生效，其中原因大概能猜到七七八八，但不知道如何表达也不是很确定，欢迎大佬为我解惑