HarmonyOS Next如何基于HMRouter实现交互式转场？

Question

当应用中有页面的进出场效果与用户手势操作同步的诉求时，即当用户手指在屏幕上移动时，页面跟随用户手势移动，这种场景HMRouter如何实现？
本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

可以参考以下实现，通过IHMAnimator的interactive函数控制动画播放进度，在actionStart中判断向右移动执行页面返回操作，在updateProgress更新动画进度，在actionEnd中获取到动画的最终状态，根据最终状态判断是继续执行动画与页面返回还是关闭动画取消页面返回。

@HMAnimator({ animatorName: 'liveInteractiveAnimator' })
export class LiveInteractiveAnimator implements IHMAnimator {
  effect(enterHandle: HMAnimatorHandle, exitHandle: HMAnimatorHandle): void {
    // ...
  }

  interactive(handle: HMAnimatorHandle): void {
    handle.actionStart((event: GestureEvent) => {
      if (event.offsetX > 0) {
        HMRouterMgr.pop()
      }
    })
    handle.updateProgress((event, proxy, operation, startOffset) => {
      if (!proxy?.updateTransition || !startOffset) {
        return
      }
      let offset = event.fingerList[0].localX - startOffset;
      if (offset < 0) {
        proxy?.updateTransition(0)
        return;
      }
      let rectWidth = event.target.area.width as number
      let rate = offset / rectWidth
      proxy?.updateTransition(rate)
    })
    handle.actionEnd((event, proxy, operation, startOffset) => {
      if (!startOffset) {
        return
      }
      let rectWidth = event.target.area.width as number
      let rate = (event.fingerList[0].localX - startOffset) / rectWidth
      if (rate > 0.4) {
        proxy?.finishTransition()
      } else {
        proxy?.cancelTransition?.()
      }
    })
  }
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。