HarmonyOS 动画执行时机问题

想知道动画执行时机是怎样的,目前定义了一个自定义组件,通过状态去修改属性,但是动画并未如期执行。

@Component  
struct RefreshComp {  
  @Prop showAnimation: boolean  
  @State refreshText: string = ''  
  @State refreshImage: ResourceStr = ''  
  @State rotateAngle: number = 0  
  aboutToAppear() {  
    if (this.showAnimation) {  
      // this.rotateAngle = 360  
      this.rotateAngle = 180  
    }  
  }  
  
  build() {  
    Column() {  
      Text(this.refreshText)  
        .fontColor('#0E1627')  
        .fontSize(14)  
        .lineHeight(20)  
      Image(this.refreshImage)  
        .rotate({ angle: this.rotateAngle })  
        .animation({  
          duration: 500,  
          iterations: -1, // 设置-1表示动画无限循环  
        })  
        .size({  
          width: 27,  
          height: 27  
        })  
        .margin({  
          top: 15  
        })  
    }  
    .padding({  
      top: 27  
    })  
  }  
}  
//使用方,status是正常的。  
@Builder  
  CustomRefresh() {  
    if (this.controller.getRefreshLayoutStatus() === RefreshLayoutStatus.Pulling ||  
      this.controller.getRefreshLayoutStatus() === RefreshLayoutStatus.Release) {  
      RefreshComp({  
        refreshText: '松开刷新',  
        refreshImage: $r('app.media.zc_refresh_header'),  
      })  
    } else if (this.controller.getRefreshLayoutStatus() === RefreshLayoutStatus.Refreshing) {  
      RefreshComp({  
        refreshImage: $r('app.media.zc_refresh_header'),  
        showAnimation: true  
      })  
    } else if (this.controller.getRefreshLayoutStatus() === RefreshLayoutStatus.Finish) {  
      RefreshComp({  
        refreshImage: $r('app.media.zc_refresh_header_success')  
      })  
    }  
  }
HarmonyOS
2024-10-16 10:07:28
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

这边动画没有执行,是由于生命周期导致的缘故,当在aboutToAppear中修改数据后,build才执行,而这是rotateAngle值已经变了,而当值相同时动画无法执行,所以看不出效果。 参考demo如下:

@Entry  
@Component  
export struct RefreshComp {  
  @State refreshText: string = '松开刷新'  
  @State refreshImage: ResourceStr = $r('app.media.no_result')  
  @State rotateAngle: number = 0  
  onPageShow(): void {  
    this.rotateAngle = 360  
  }  
  build() {  
    Column() {  
      Text(this.refreshText)  
        .fontColor('#0E1627')  
        .fontSize(14)  
        .lineHeight(20)  
      Image(this.refreshImage)  
        .rotate({ angle: this.rotateAngle })  
        .animation({  
          duration: 500,  
          iterations: -1, // 设置-1表示动画无限循环  
        })  
        .size({  
          width: 27,  
          height: 27  
        })  
        .margin({  
          top: 15  
        })  
        .onClick(() => {  
          this.rotateAngle = 360  
        })  
    }  
    .padding({  
      top: 27  
    })  
  }  
}

生命周期执行顺序可查看如下链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-page-custom-components-lifecycle-V5

分享
微博
QQ
微信
回复
2024-10-16 18:28:26
相关问题
Image缓存配置执行时机
670浏览 • 1回复 待解决
延迟任务执行时机及运行线程
2034浏览 • 1回复 待解决
HarmonyOS runJavaScript执行时
228浏览 • 1回复 待解决
HarmonyOS getContext方法时机问题
243浏览 • 1回复 待解决
如何通过AOP统计方法执行时
621浏览 • 1回复 待解决
HarmonyOS onBackPress执行异常问题
502浏览 • 1回复 待解决
HarmonyOS 路径动画相关问题
593浏览 • 1回复 待解决
HarmonyOS web控件执行多次的问题
378浏览 • 1回复 待解决
关于属性动画问题
10011浏览 • 3回复 待解决