animation 动画如何应用在canvas 内容里面？

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;  
        // 父组件column的opacity属性有变化，会导致其子节点的透明度也变化，所以这里会给column和其子节点的透明度属性都加动画  
        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)  
  }  
}
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.
59.
60.
61.
62.