HarmonyOS .scale没有动画效果

.scale根本就没有动画效果

@Component ImageScale {

  @State scaleValue: ScaleOptions = { x: 1, y: 1, z: 1 }

  build() {
    Column() {
      Image(this.viewModel?.item?.image?.hdUrl)
        .width("100%")
        .aspectRatio(1.0)
        .animation({ duration: 200, curve: "ease" })
        .scale(this.scaleValue)
        .gesture(TapGesture({ count: 2 }).onAction((event: GestureEvent) => {
          let width = event.target.area.width.valueOf() as number
          let height = event.target.area.height.valueOf() as number
          let centerX = event.fingerList[0].localX / width
          let centerY = event.fingerList[0].localY / height

          if (this.scaleMode) {
            this.scaleMode = false
            this.scaleValue = {x : 1, y : 1}
          } else {
            this.scaleMode = true
            this.scaleValue = {x : 2, y : 2, centerX: `${centerX * 100}%`, centerY:`${centerY * 100}%`}
          }
        }))
    }
  }
}

HarmonyOS

Heiang

2024-12-18 16:55:02

浏览

回答 1

待解决

回答 1

按赞同

按时间

aquaa

参考此代码实现

@Entry
@Component
struct AnimationPage {
  @State message: string = 'Hello World fhlsfslfslfhklafhlaskhfkjsfhjksadfhlkjsafsafhkjsfhkljfhjksafhkjasfksfh';
  @State textY:number = 0

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .scale({x:1,y:this.textY})
          .animation({
            duration:2000,
            curve: "linear"
          }).id("text")

        Button("点击动画展开").onClick((ele)=>{
          this.textY = 1
        }).width(200).height(50)
          .backgroundColor(Color.Pink).borderRadius(10)
      }
      .width('100%')
    }
    .height('100%')
  }
}