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')  
      })  
    }  
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.

HarmonyOS

Heiang

2024-10-16 10:07:28

2807浏览

回答 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  
    })  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.

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

2024-10-16 18:28:26

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 动画执行时机问题

订阅鸿蒙技术特刊，精选内容抢先看