在HarmonyOS NEXT开发中Canvas 实现动画？

Question

在HarmonyOS NEXT开发中Canvas 实现动画？

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

Answer 1

具体参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-refere...
ArkTs的Canvas使用与webcanvas类似，相关动画实现可以移植webcanvas参考demo：

@Entry 
@Component 
struct Index { 
  private settings: RenderingContextSettings = new RenderingContextSettings(true) 
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 
  @State timerId: number = 0 
  @State startAngle: number = Math.PI * 0.2 + (Math.PI / 180) * 90; // 起始角度（弧度制） 
  @State endAngle: number = Math.PI * 1.8 + (Math.PI / 180) * 90; // 结束角度（弧度制） 
  lengthToAdd: number = Math.PI / 360; // 每次绘制的长度（弧度制） 
  @State currentAngle: number = 0 
  @State step: number = 1; 
  // 设置圆心坐标和半径 
  centerX = 200; 
  centerY = 200; 
  radius = 100; 
 
  aboutToAppear(): void { 
    this.currentAngle = this.startAngle 
    this.timerId = setInterval(() => { 
      if (this.step %2 == 1) { 
        this.currentAngle += this.lengthToAdd; 
        this.drawArc(); 
        if (this.currentAngle > this.endAngle) { 
          this.step++; 
          this.context.globalCompositeOperation = "destination-out"; // 修改混合模式，准备擦除 
          this.context.lineWidth = 21; // 擦除时，线更宽一些，防止有残留 
        } 
      } else { 
        this.eraseArc(); 
        this.currentAngle -= this.lengthToAdd; 
        if (this.currentAngle<= this.startAngle) { 
          this.step++; 
          this.context.globalCompositeOperation = "source-over"; // 修改混合模式，正常绘制 
          this.context.lineWidth = 20; // 正常线宽 
        } 
      } 
    }, 10) 
  } 
 
  drawArc() { 
    // 绘制圆弧 
    this.context.beginPath(); 
    this.context.arc( 
      this.centerX, // 圆弧中心的 x 坐标 
      this.centerY + 30, // 圆弧中心的 y 坐标 
      this.radius, // 圆弧的半径 
      this.currentAngle - this.lengthToAdd, // 圆弧的起始角度（弧度制） 
      this.currentAngle + this.lengthToAdd // 圆弧的结束角度（弧度制） 
    ); 
    this.context.stroke(); 
  } 
 
  eraseArc() { 
    this.context.beginPath(); 
    this.context.arc( 
      this.centerX, 
      this.centerY + 30, 
      this.radius, 
      this.currentAngle - this.lengthToAdd, 
      this.currentAngle + 2 * this.lengthToAdd // 擦除时，擦除的更宽一些，防止有残留 
    ); 
    this.context.stroke(); 
  } 
 
  build() { 
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 
      Canvas(this.context) 
        .width('100%') 
        .height('100%') 
        .backgroundColor('#ffff00') 
        .onReady(() => { 
          // 设置圆弧的颜色和宽度 
          this.context.strokeStyle = Color.Green; 
          this.context.lineWidth = 20; 
        }) 
    } 
    .width('100%') 
    .height('100%') 
  } 
}

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