HarmonyOS鸿蒙Next中在关键帧动画的不同步骤怎么使用不同motionPath？

HarmonyOS鸿蒙Next中在关键帧动画的不同步骤怎么使用不同motionPath？ 试了一些方法没成功，下面是测试代码

@Entry
@Component
struct KeyframeAnimateTo02 {
  @State myScale: number = 1.0;
  uiCtx?: UIContext = undefined;
  @State kTranslateOpt: TranslateOptions = { x: 0, y: 0, z: 0 }
  // 起点
  @State x: number = 0
  @State y: number = 0

  reset() {
    this.x = 0
    this.y = 0
    this.myScale = 1
    this.kTranslateOpt = { x: 0, y: 0, z: 0 }
  }

  keyFrameAnimation() {
    //安全校验
    if (!this.uiCtx) {
      console.info("no uiContext, keyframe failed");
      return;
    }
    // this.myScale = 1;
    // this.kTranslateOpt = { x: 0, y: 0, z: 0 }
    this.uiCtx.keyframeAnimateTo({
      iterations: 1, // 整体播放次数
      expectedFrameRateRange: { min: 10, max: 120, expected: 60, },
      // onFinish: () => this.reset()
    }, [
      {
        duration: 1000, event: () => {
        this.x = 300
      }
      }, // 第1段动画
      {
        duration: 1000, event: () => {
        this.y = 300
      }
      }// 第2段动画
    ]);
  }

  aboutToAppear() {
    this.uiCtx = this.getUIContext?.();
  }

  build() {
    Stack() {
      Text('方块')
        .textAlign(TextAlign.Center)
        .backgroundColor('#ffb5c5e1')
        .size({ width: 50, height: 50 })
        .scale({
          x: this.myScale,
          y: this.myScale,
          centerX: 0,
          centerY: 0
        })
        .position({ x: this.x, y: this.y, })
        // .motionPath({ path: this.motionPaths[this.motionSection], })
        // .attributeModifier(new Mod(this.motionSection))
    }
    .width(300)
    .height(600)
    .backgroundColor('#ffe3f1df')
    .onClick((e) => this.keyFrameAnimation())
  }
}

class Mod implements AttributeModifier<CommonAttribute> {
  type: number

  constructor(type: number) {
    this.type = type
  }

  applyNormalAttribute(instance: CommonAttribute): void {
    if (this.type == 1) {
      instance.motionPath({ path: `M0 0 Q${(vp2px(100))} 0 ${vp2px(50)} ${vp2px(50)}` })
    } else if (this.type == 2) {
      instance.motionPath({ path: `M0 0 Q${(vp2px(100))} 0 ${vp2px(100)} ${vp2px(100)}` })

    }
  }
}

@Entry
@Component
struct KeyframeAnimateTo02 {
  @State toggle: boolean = true;
  @State myColor: Color = Color.Pink
  @State pathParams: MotionPathOptions = {
    path: 'Mstart.x start.y L10 100 L0 0 Lend.x end.y',
    from: 0,
    to: 1,
    rotatable: false
  };
  @State x: number = 10;
  @State y: number = 10;

  setPosition() {
    this.x = 200
    this.y = 200
    this.myColor = Color.Blue
  }

  setPosition2() {
    this.x = 400
    this.y = 400
    this.myColor = Color.Green
  }

  keyFrameAnimation() {
    this.getUIContext().keyframeAnimateTo({
      iterations: 1, // 整体播放次数
      expectedFrameRateRange: { min: 10, max: 120, expected: 60, },
    }, [
      {
        duration: 1000, event: () => {
        this.pathParams = {
          path: 'M10 10 L10 200 L200 200',
          from: 0,
          to: 1,
          rotatable: false
        };
        this.setPosition()
      }
      }
      , // 第1段动画
      {
        duration: 1000, event: () => {
        this.pathParams = {
          path: 'M200 200 L400 400',
          // path: 'M200 200 C300 200 350 400 400 400',
          // path: `M0 0 Q${(vp2px(100))} 0 ${vp2px(50)} ${vp2px(50)}`,
          from: 0,
          to: 1,
          rotatable: false
        };
        this.setPosition2()
      }
      }// 第2段动画
    ]);
  }

  build() {
    Column() {
      Button('点击').position({ x: 200 })
        .onClick(() => {
          this.toggle = !this.toggle
          this.keyFrameAnimation()
        })

      Text('Hello')
        .margin({ top: 50 })
        .width(50)
        .height(50)
        .backgroundColor(this.myColor)
        .motionPath(this.pathParams) // 设置路径动画
        .position({ top: this.toggle ? 0 : this.y, left: this.toggle ? 0 : this.x }) // 根据toggle状态设置位置
    }.backgroundColor('#ffa4cdb0')
    .width('100%')
    .height('100%') // 设置列的宽度和高度为100%
  }
}

第2段测试代码的执行录屏见附件（先瞬移，然后执行第2段动画）

这段代码中的第2段动画换为曲线后比较明显，先瞬移，然后曲线移动，也就是第一段动画没有执行