HarmonyOS鸿蒙Next中使用NavPathStack转场动画如何做到进场动画和退出动画时长不一致呢

HarmonyOS鸿蒙Next中使用NavPathStack转场动画如何做到进场动画和退出动画时长不一致呢

build() {
    Navigation(this.pathStack) {
    }
    .customNavContentTransition((from: NavContentInfo, to: NavContentInfo, operation: NavigationOperation) => {
      let customAnimation: NavigationAnimatedTransition = {
        timeout: ANIMATION_DURATION,
        transition: (transitionProxy: NavigationTransitionProxy) => {
          this.handleTransitionAnimation(from, to, operation, transitionProxy);
        }
      };
      return customAnimation;
    })
  }
  

private executeFirstPageTransitionAnimation(navDestinationId: string, isPush: boolean, isExit: boolean,
    transitionProxy: NavigationTransitionProxy) {
    const param: AnimateCallback = CustomTransition.getInstance().getAnimateParam(navDestinationId);
    if (param.start) {
      param.start(isPush, isExit);
      animateToImmediately({
        duration: 0
      }, () => {
      });
      this.getUIContext()?.animateTo({
        // 时长 300 ms
        duration: ANIMATION_DURATION, curve: Curve.Friction, onFinish: () => {
          transitionProxy.finishTransition();
        }
      }, () => {
        if (param.finish) {
          param.finish(isPush, isExit);
        }
      });
    }
  }

现在只在这里可以设置时间长度，但是我想入场和退场时间不同应该怎么可以实现？


更多关于HarmonyOS鸿蒙Next中使用NavPathStack转场动画如何做到进场动画和退出动画时长不一致呢的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

通过NavigationOperation判断出入场，然后设置对应的动画即可。

build() {
    Navigation(this.pathStack) {
    }
    .customNavContentTransition((from: NavContentInfo, to: NavContentInfo, operation: NavigationOperation) => {
      let customAnimation: NavigationAnimatedTransition = {
        timeout: ANIMATION_DURATION,
        transition: (transitionProxy: NavigationTransitionProxy) => {
          if (operation == NavigationOperation.PUSH) {
            //进场动画
             this.getUIContext()?.animateTo({
              duration: 500,
          })
        }else if(operation == NavigationOperation.POP){
          //退场动画
           this.getUIContext()?.animateTo({
              duration: 300, 
          })
        }
      };
      return customAnimation;
    })
  }

cke_200.png

相关文档：【API_NavigationOperation】

相关示例：【设置可交互转场动画】

更多关于HarmonyOS鸿蒙Next中使用NavPathStack转场动画如何做到进场动画和退出动画时长不一致呢的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


customNavContentTransition 中可以根据 operation 判断

if (operation == NavigationOperation.Push) {
   // 入场
} else if (operation == NavigationOperation.Pop) {
   // 出场
}

executeFirstPageTransitionAnimation方法里，根据 isPush 判断，true 为入场， false为出场。

duration: isPush ? ANIMATION_DURATION : 200

在HarmonyOS Next的NavPathStack中，可通过NavDestination的onEnterTransition和onExitTransition分别设置进场与退出动画。使用NavEnterTransition和NavExitTransition配置动画属性，其中duration参数可独立控制时长。例如，进场动画设为500毫秒，退出动画设为300毫秒，实现时长不一致。

在HarmonyOS Next中，要实现NavPathStack进场和退场动画时长不一致，可以通过以下方式实现：

在customNavContentTransition回调中，根据operation参数判断当前是Push（进场）还是Pop（退场）操作，然后分别设置不同的动画时长：

.customNavContentTransition((from: NavContentInfo, to: NavContentInfo, operation: NavigationOperation) => {
  // 定义不同的动画时长
  const PUSH_DURATION = 300; // 进场动画时长
  const POP_DURATION = 150;  // 退场动画时长
  
  let customAnimation: NavigationAnimatedTransition = {
    // 根据操作类型设置不同的timeout
    timeout: operation === NavigationOperation.Push ? PUSH_DURATION : POP_DURATION,
    transition: (transitionProxy: NavigationTransitionProxy) => {
      // 在transition回调中也需要根据操作类型使用不同的时长
      this.handleTransitionAnimation(from, to, operation, transitionProxy, 
        operation === NavigationOperation.Push ? PUSH_DURATION : POP_DURATION);
    }
  };
  return customAnimation;
})

然后在handleTransitionAnimation方法中接收时长参数：

private handleTransitionAnimation(from: NavContentInfo, to: NavContentInfo, 
  operation: NavigationOperation, transitionProxy: NavigationTransitionProxy, duration: number) {
  
  // 根据operation判断是进场还是退场
  const isPush = operation === NavigationOperation.Push;
  
  this.getUIContext()?.animateTo({
    duration: duration, // 使用传入的时长
    curve: Curve.Friction,
    onFinish: () => {
      transitionProxy.finishTransition();
    }
  }, () => {
    // 动画执行逻辑
  });
}

关键点：

  1. NavigationOperation.Push表示进场（导航到新页面）
  2. NavigationOperation.Pop表示退场（返回上一页面）
  3. 通过判断operation类型，为不同操作分配不同的duration值
  4. 需要在timeout和实际动画执行中都使用对应的时长

这样就能实现进场动画300ms、退场动画150ms的不同时长效果。

回到顶部