鸿蒙（HarmonyOS）性能优化实战-应用程序动效能力实践

本文链接：https://blog.youkuaiyun.com/CTrup/article/details/142462303

往期知识点整理

概述

本文介绍如何在开发应用程序时合理地使用动效，来获得更好的性能。主要通过减少布局和属性的变更频次，避免冗余刷新，从而降低性能开销。

基于上述考虑，提供四种较为推荐的动效实现方式：

组件转场动画使用transition
组件布局改动时使用图形变换属性动画
动画参数相同时使用同一个animateTo
多次animateTo时统一更新状态变量

合理使用动效

组件转场动画使用transition

在实现组件出现和消失的动画效果时，通常有两种方式：

使用组件动画（animateTo），并在在动画结束回调中增加逻辑处理。
直接使用转场动画（transition）。

animateTo需要在动画前后做两次属性更新，而transition只需做一次条件改变更新，性能更好。此外，使用transition，可以避免在结束回调中做复杂逻辑处理，开发实现更容易。因此，推荐优先使用transition。

反例：通过改变透明度属性，从1到0进行隐藏，并在动画结束回调中控制组件的消失。

@Entry
@Component
struct MyComponent {
   
   
  @State mOpacity: number = 1;
  @State show: boolean = true;
  count: number = 0;
  
  build() {
   
   
    Column() {
   
   
      Row() {
   
   
        if (this.show) {
   
   
          Text('value')
            .opacity(this.mOpacity)
        }
      }
      .width('100%')
      .height(100)
      .justifyContent(FlexAlign.Center)
      Text('toggle state')
        .onClick(() => {
   
   
          this.count++;
          const thisCount: number = this.count;
          this.show = true;
          // 通过改变透明度属性，对Text控件做隐藏或出现的动画
          animateTo({
   
    duration: 1000, onFinish: () => {
   
   
            // 在最后一个动画中，先让Text控件隐藏，再改变条件让Text控件消失
            if (thisCount === this.count && this.mOpacity === 0) {
   
   
              this.show = false;
            }
          } }, () => {
   
   
            this.mOpacity = this.mOpacity === 1 ? 0 : 1;
          })
        })
    }
  }
}

正例：直接使用转场动画，实现Text控件透明度的出现与消失。

@Entry
@Component
struct MyComponent {
   
   
  @State show: boolean = true;
  
  build() {
   
   
    Column() {
   
   
      Row() {
   
   
        if (this.show) {
   
   
          Text('value')
            // 设置id，使转场可打断
            .id('myText')
            .transition(TransitionEffect.OPACITY.animation({
   
    duration: 1000 }))
        }
      }.width('100%')
      .height(100)
      .justifyContent(FlexAlign.Center)
      Text('toggle state')
        .onClick(() => {
   
   
          // 通过transition，做透明度的出现或消失动画
          this.show =