HarmonyOS鸿蒙Next中如何获取卡片和按钮的中心位置，使卡片的消失动画效果为缩小并移动到按钮位置？

HarmonyOS鸿蒙Next中如何获取卡片和按钮的中心位置，使卡片的消失动画效果为缩小并移动到按钮位置？

@Entry
@Component
struct CardComponent {
  @State @Watch('onAnimationChange') isShow: boolean = false;
  @State widthSize: number = 116;
  @State heightSize: number = 184;
  @State scaleCard: number = 0;
  @State opacityCard: number = 0;
  @State centerX: string = '0%';
  @State centerY: string = '0%';
  @State screenOffset: string = '';
  @State X: number = 0;
  @State Y: number = 0;
  targetBtnX: number = 0;
  targetBtnY: number = 0;
  targetCardX: number = 0;
  targetCardY: number = 0;

  aboutToAppear(): void {
    this.init()
  }

  onAnimationChange() {
    if (this.isShow) {
      this.showAnimation()
    } else {
      this.hideAnimation()
    }
  }

  showAnimation() {
    this.X = 0;
    this.Y = 0;
    this.centerX = '0%'
    this.centerY = '100%'
    // 创建动画
    this.getUIContext()?.animateTo({
      duration: 300,
      curve: Curve.EaseInOut
    }, () => {
      // 放大1倍
      this.scaleCard = 1
      // 透明度
      this.opacityCard = 1
    })
  }

  hideAnimation() {
    this.centerX = '50%'
    this.centerY = '50%'
    // 创建动画
    this.getUIContext()?.animateTo({
      duration: 300,
      curve: Curve.EaseInOut
    }, () => {
      // 缩小
      this.scaleCard = 0
      // 透明度
      this.opacityCard = 0
      // 计算需要移动的偏移量，使卡片中心移动到按钮中心
      this.X = this.targetBtnX - this.targetCardX;
      this.Y = this.targetBtnY - this.targetCardY;
    })
  }

  // 初始化方法：获取初始位置
  init() {
    // 绑定指定组件，返回对应的监听句柄
    let observer = this.getUIContext().getUIInspector().createComponentObserver('targetBtn');
    let observer2 = this.getUIContext().getUIInspector().createComponentObserver('targetCard');

    observer.on('layout', () => {
      let nodeBtn = this.getUIContext().getComponentUtils().getRectangleById('targetBtn');
      if (nodeBtn) {
        // 存储按钮的中心位置
        this.targetBtnX = nodeBtn.screenOffset.x + nodeBtn.size.width / 2;
        this.targetBtnY = nodeBtn.screenOffset.y + nodeBtn.size.height / 2;
        console.log(`targetBtnX: ${this.targetBtnX}, targetBtnY: ${this.targetBtnY}`);
      }
      console.log(`targetCardX: ${this.targetCardX}, targetCardY: ${this.targetCardY}`);
      }
      // 通过句柄向对应的查询条件取消注册回调，当组件布局完成时不再触发指定的回调
      observer.off('layout');
    })
    observer2.on('layout', () => {
      let nodeCard = this.getUIContext().getComponentUtils().getRectangleById('targetCard');
      if (nodeCard) {
        this.screenOffset = JSON.stringify(nodeCard.screenOffset)
        // 存储按钮的卡片中心位置
        this.targetCardX = nodeCard.screenOffset.x + nodeCard.size.width / 2;
        this.targetCardY = nodeCard.screenOffset.y + nodeCard.size.height / 2;
      }
      // 通过句柄向对应的查询条件取消注册回调，当组件布局完成时不再触发指定的回调
      observer2.off('layout');
    })
  }

  build() {
    Column() {
      Column() {}
      .width(this.widthSize)
      .height(this.heightSize)
      .scale({
        x: this.scaleCard,
        y: this.scaleCard,
        centerX: this.centerX,
        centerY: this.centerY
      })
      .visibility(this.opacityCard ? Visibility.Visible : Visibility.None)
      .translate({ x: this.X, y: this.Y })
      .borderRadius(6)
      .backgroundColor(Color.Yellow)
      .justifyContent(FlexAlign.Start)
      .id('targetCard')

      Button('按钮')
        .width(100)
        .height(50)
        .position({ 'bottom': 0, 'right': 0})
        .id('targetBtn')
        .onClick(() => {
          this.isShow = !this.isShow
        })
    }
    .width('100%')
    .height('100%')
  }
}

现在想实现的效果是出现的时候从左下角展开，收起的时候会收到按钮所在的位置。目前通过计算组件位置获取移动距离，但是获得的位置不太对？