204.HarmonyOS NEXT系列教程之 TabsConcaveCircle组件动画系统实现

getAnimateSelectIndex() {
  let animateDelay = 500;
  animateTo({
    duration: this.animateTime,
    delay: animateDelay
  }, () => {
    this.animateSelectIndex = this.selectIndex
  })
  this.createAnimation()
}

createAnimation() {
  if (!this.circleInfo) {
    return;
  }
  
  this.canvasAnimator = animator.create({
    duration: this.animateTime,
    easing: "ease",
    delay: 0,
    fill: "forwards",
    direction: "normal",
    iterations: 1,
    begin: this.animationPositionX,
    end: this.circleInfo?.getMenuCenterX(this.selectIndex)
  })
  
  this.canvasAnimator.onFrame = (value: number) => {
    this.animationPositionX = value;
    this.circleInfo?.setPositionXY({ x: value - this.circleInfo.circleRadius })
    this.createCanvas()
  }
  
  this.canvasAnimator.play()
}

@Builder
TabItem(item: TabMenusInterfaceIRequired, index: number) {
  Column() {
    if (item.image) {
      Image(getImageUrl(item as TabMenusInterfaceIRequired, index, this.selectIndex))
        .size({
          width: this.imageWH,
          height: this.imageWH,
        })
        .interpolation(ImageInterpolation.High)
        .offset({
          y: this.selectIndex === index && this.animateSelectIndex === index ? 
             -this.imageOffsetY : 0,
        })
        .id(`${this.concaveCircleId}${index}`)
    }
    // ... 其他代码
  }
}

aboutToAppear(): void {
  this.listener = inspector.createComponentObserver(`${this.concaveCircleId}0`)
  this.getImageOffsetY()
  this.animateSelectIndex = this.selectIndex;
}

getImageOffsetY() {
  let onLayoutComplete: () => void = (): void => {
    let modePosition = componentUtils.getRectangleById(`${this.concaveCircleId}0`)
    if (modePosition.localOffset) {
      let halfHeight = px2vp(modePosition.size.height) / 2;
      this.imageOffsetY = px2vp(modePosition.localOffset.y) + halfHeight;
      this.listener?.off('draw')
    }
  }
  let FuncDraw = onLayoutComplete;
  this.listener?.on('draw', FuncDraw)
}