HarmonyOS Next中下面的多个动画代码如何优化？

Question

@Entry
@Component
struct MyComponent {
  @State w:number = 150
  @State h:number = 2
  @State brightNum:number = 1.5
  @State color:Color = Color.Red
  // 动画闭包1，设置宽度变化
  func1() {
    animateTo({curve: Curve.Sharp, duration: 1000}, () => {
      this.w = (this.w === 80 ? 150 : 80);
    });
  }
  // 动画闭包2，设置颜色变化
  func2() {
    animateTo({curve: Curve.Sharp, duration: 1000}, () => {
      this.color = (this.color === Color.Yellow ? Color.Red : Color.Yellow);
    });
  }
  // 动画闭包3，设置高度变化
  func3() {
    animateTo({curve: Curve.Sharp, duration: 1000}, () => {
      this.h = (this.h === 2 ? 5 : 2);
    });
  }
  // 动画闭包4，设置高光变化
  func4() {
    animateTo({curve: Curve.Sharp, duration: 1000}, () => {
      this.brightNum= (this.brightNum=== 1.5 ? 1 : 1.5);
    });
  }
  build() {
    Column() {
      Row()
        .width(this.w)
        .backgroundColor(this.color)
        .height(this.h)
        .brightness(this.brightNum)
      // 其他相似布局
      …
      Button("click nFunc")
        // 按键属性设置
        …
        .onClick(() => {
          let doTimes = 10;
            // 按播放次数循环播放动画
            for (let i = 0; i < doTimes; i++) {
              setTimeout(() => {
                this.func1();
                this.func2();
                this.func3();
                this.func4();
              }, 1000 * i)
            }
        })
    }
  }
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

可以将相同动画参数的动画合并在一个动画闭包中，具体代码实现如下：

@Entry
@Component
struct MyComponent {
  @State w:number = 150
  @State h:number = 2
  @State brightNum:number = 1.5
  @State color:Color = Color.Red
  // 统一动画闭包，同时设置四个属性变化
  func() {
    animateTo({curve: Curve.Sharp, duration: 1000}, () => {
      this.w = (this.w === 80 ? 150 : 80);
      this.color = (this.color === Color.Yellow ? Color.Red : Color.Yellow);
      this.h = (this.h === 2 ? 5 : 2);
      this.brightNum= (this.brightNum=== 1.5 ? 1 : 1.5);
    });
  }
 build() {
    Column() {
      Row()
        .width(this.w)
        .backgroundColor(this.color)
        .height(this.h)
        .brightness(this.brightNum)
      // 其他相似布局
      …
      Button("click oneFunc")
        // 按键属性设置
        …
        .onClick(() => {
          let doTimes = 10;
          // 按播放次数循环播放动画
          for (let i = 0; i < doTimes; i++) {
            setTimeout(() => {
              this.func();
            }, 1000 * i)
          }
        })
    }
  }
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。