HarmonyOS 鸿蒙Next 贝塞尔曲线如何加动画

HarmonyOS 鸿蒙Next 贝塞尔曲线如何加动画 由多条 三次贝塞尔曲线(bezierCurveTo)组成的曲线，如何给整个曲线添加过度动画


更多关于HarmonyOS 鸿蒙Next 贝塞尔曲线如何加动画的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

试用下该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 贝塞尔曲线如何加动画的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）系统中为贝塞尔曲线添加动画，可以通过动画框架和Canvas绘图结合来实现。具体步骤如下：

  1. 定义贝塞尔曲线：首先，使用Canvas的绘图API定义你的贝塞尔曲线。这通常涉及到Path对象的创建和moveTo、quadTo或cubicTo等方法的调用，以指定曲线的起点和控制点。

  2. 创建动画：使用HarmonyOS的动画系统（如Animator或KeyFrameAnimator）来定义动画属性。你可能需要动画化曲线的某个参数，比如控制点的位置，或者整个曲线沿着某个路径移动。

  3. 绑定动画到属性：将动画绑定到贝塞尔曲线的相关属性上。这通常涉及到在动画的每一帧中更新Canvas的绘图逻辑，以反映动画的最新状态。

  4. 更新和渲染：在动画的每一帧中，根据动画的当前值更新贝塞尔曲线的绘制逻辑，并重新渲染Canvas。

  5. 启动动画：最后，启动动画，让系统开始按照预定的时间线和插值器更新动画属性，并触发Canvas的重新渲染。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html，

回到顶部