在HarmonyOS NEXT开发中如何用动画实现Canvas内容的改变？

Question

在HarmonyOS NEXT开发中如何用动画实现Canvas内容的改变？需要用Canvas绘制一些内容，且内容在组件状态改变时，需要动画效果

Answer 1

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) 
    } 
 
  } 
}