HarmonyOS 如何用动画实现Canvas内容的改变

canvas动画实现方式，下面的demo可以作为参考:

import curves from '@ohos.curves';

@Entry
@Component
struct AnimationDemo {
  @State animate: boolean = false; // 第一步: 声明相关状态变量
  @State rotateValue: number = 0; // 组件一旋转角度
  @State translateX: number = 0; // 组件二偏移量
  @State opacityValue: number = 1; // 组件二透明度
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) // 第二步：将状态变量设置到相关可动画属性接口

  build() {
    Row() {
      //组件一
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .onReady(() => {
            this.context.fillRect(0, 0, 100, 100)
          })
      }
      .opacity(this.opacityValue)
      .rotate({ angle: this.rotateValue })
      .animation({ curve: curves.springMotion() }) //通过属性动画接口开启属性动画
      .backgroundColor('#317AF7')
      .width(100)
      .height(100)
      .borderRadius(30)
      .onClick(() => {
        this.animate = !this.animate
        //闭包内通过状态变量改变UI界面 //
        // 这里可以写任何能改变UI的逻辑比如数组添加，显隐控制，系统会检测改变后的UI界面与之前的UI界面的差异，对有差异的部分添加动画 //
        // 组件一的rotate属性发生变化，所以会给组件一添加rotate旋转动画
        this.rotateValue = this.animate ? 90 : 0
        // 组件二的offset属性发生变化，所以会给组件二添加offset偏移动画
        this.translateX = this.animate ? 50 : 0
        this.opacityValue = this.animate ? 0.6 : 1
      })

      // 组件二
      Column() {
      }
      .justifyContent(FlexAlign.Center)
      .width(100)
      .height(100)
      .backgroundColor('#D94838')
      .borderRadius(30)
      .opacity(this.opacityValue)
      .translate({ x: this.translateX })
      .animation({ curve: curves.springMotion() })
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }

  }
}