HarmonyOS 鸿蒙Next中根据ID从一点到另一点到动画设计

HarmonyOS 鸿蒙Next中根据ID从一点到另一点到动画设计 工具类util:

import { Animator as animator, AnimatorResult, AnimatorOptions, Offset, componentUtils, UIContext } from '@kit.ArkUI'

export class AnimateMoveById {
  constructor(fromPosId: string, toPosId: string, uiContext: UIContext, currentPos: Offset,
    animatorOptions?: AnimatorOptions, onFinish?: () => void, onCancel?: ()=> void) {
    this.fromPosId = fromPosId
    this.toPosId = toPosId
    this.uiContext = uiContext
    this.currentPos = currentPos
    if (animatorOptions) {
      this.controller = animator.create(animatorOptions)
    } else {
      this.controller = animator.create({
        // 建议使用 this.getUIContext.creatAnimator()接口
        duration: 3000,
        easing: "ease",
        delay: 0,
        fill: "forwards",
        direction: "normal",
        iterations: 1,
        begin: 0.0,
        end: 100.0
      })
    }
    if(onFinish){
      this.controller.onFinish = onFinish
    }
    if(onCancel){
      this.controller.onCancel = onCancel
    }
  }

  controller: AnimatorResult | undefined = undefined
  fromPosId: string = ''
  toPosId: string = ''
  fromPos: Offset | null = null
  toPos: Offset | null = null
  currentPos: Offset = { x: 0, y: 0 }
  uiContext: UIContext = new UIContext()

  play(): AnimateMoveById {
    this.fromPos = componentUtils.getRectangleById(this.fromPosId).windowOffset
    this.toPos = componentUtils.getRectangleById(this.toPosId).windowOffset
    this.currentPos!!.x = this.uiContext.px2vp(this.fromPos.x)
    this.currentPos!!.y = this.uiContext.px2vp(this.fromPos.y)
    let ox = this.currentPos!!.x
    let oy = this.currentPos!!.y
    if (this.controller) {
      this.controller.onFrame = (value: number) => {
        if (this.currentPos) {
          this.currentPos!!.x =
            this.uiContext.px2vp((this.toPos!!.x - this.fromPos!!.x) * value / 100.0) + ox
          this.currentPos!!.y =
            this.uiContext.px2vp((this.toPos!!.y - this.fromPos!!.y) * value / 100.0) + oy
        }
      }
      this.controller.play()
    }

    return this
  }
}

使用时：

  let options: AnimatorOptions = {
    duration: 6000,
    easing: "ease",
    delay: 0,
    fill: "forwards",
    direction: "normal",
    iterations: 1,
    begin: 0.0,
    end: 100.0
  }
  let a = new AnimateMoveById('0', '1', this.getUIContext(), this.currentPos!!, options, () => {
    toast.show('动画结束了!')
  }, () => {
    toast.show('取消动画回调')
  })
  this.animateText = '这是一个动画'
  // a.controller!!.onCancel = () => {
  //   toast.show('取消动画回调')
  // }
  // if(a.controller){
  //   a.controller.onFinish = () =>{
  //     toast.show('动画结束了!')
  //   }
  // }
  a.play()
  // setTimeout(() => {
  //   a.controller?.cancel()
  // }, 2000)
})

同时需要给要定位动画的首位和末位加上.id()