HarmonyOS 鸿蒙Next 是否有类似小红书从feed流进详情页的一镜到底的特效的示例

发布于 1周前 作者 ionicwang 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 是否有类似小红书从feed流进详情页的一镜到底的特效的示例

小红书或者淘宝这种从列表进入到详情页的一镜到底的转场特效有没有示例呢,或者实现思路

2 回复

可参照官方示例对Navigation添加customNavContentTransition自定义转场:

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#示例3

添加后每次转场时都会走这个函数,返回undefined的话则走默认的navigation左右转场,返回NavigationAnimatedTransition类型对象的话则走对应的自定义转场动画实现。因此在customNavContentTransition函数中需要自行添加路由管控,基本方式是对from.name和to.name以及是否注册了转场动画实现等进行判断,来决定是否走自定义转场。

参考代码:

Navigation(this.pageInfos)
  .hideNavBar(true)
  .customNavContentTransition((from: NavContentInfo, to: NavContentInfo, operation: NavigationOperation) => {
    if ((!from || !to) || (!from.name || !to.name)) {
      return undefined;
    }

    // 通过from和to的name对自定义转场路由进行管控
    if (!this.isCustomTransitionEnabled(from.name, to.name)) {
      return undefined;
    }

    // 针对点击按钮A走自定义转场点击按钮B走默认转场的场景,需要对是否注册了animation进行判断,来决定是否走自定义转场
    let fromParam: AnimateCallback = CustomTransition.getInstance().getAnimateParam(from.index);
    let toParam: AnimateCallback = CustomTransition.getInstance().getAnimateParam(to.index);
    if (!fromParam.animation && !toParam.animation) {
      return undefined;
    }

    // 一切判断完成后,构造customAnimation给系统侧调用,执行自定义转场动画
    let customAnimation: NavigationAnimatedTransition = {
      onTransitionEnd: (isSuccess: boolean) => {
        console.log(TAG, `current transition result is ${isSuccess}`);
      },
      timeout: 1000,
      transition: (transitionProxy: NavigationTransitionProxy) => {
        console.log(TAG, 'trigger transition callback');
        if (fromParam.animation) {
          fromParam.animation(operation == NavigationOperation.PUSH, true, transitionProxy);
        }
        if (toParam.animation) {
          toParam.animation(operation == NavigationOperation.PUSH, false, transitionProxy);
        }
      }
    };
    return customAnimation;
  })

更多关于HarmonyOS 鸿蒙Next 是否有类似小红书从feed流进详情页的一镜到底的特效的示例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙Next已经内置了丰富的动画和页面过渡效果,其中包含了可以实现类似小红书从feed流进详情页的一镜到底特效的功能。具体来说,鸿蒙系统提供了页面切换动画的API,开发者可以利用这些API自定义页面之间的过渡效果。

在鸿蒙系统中,可以通过设置PageSlider组件的属性或者自定义动画来实现一镜到底的效果。PageSlider组件支持页面间的平滑过渡,开发者可以通过调整其过渡动画的参数,如动画时长、加速度等,来实现所需的一镜到底特效。

此外,鸿蒙系统还支持使用ArkUI框架进行UI界面的开发,ArkUI提供了丰富的动画和过渡效果组件,开发者可以通过组合这些组件,创建出复杂且流畅的页面过渡动画。

鸿蒙系统的动画系统具有较高的灵活性,开发者可以根据实际需求进行细致的调整,以达到最佳的用户体验。如果开发者在实现过程中遇到具体的技术问题,可以通过查阅鸿蒙系统的官方文档或者利用鸿蒙系统的开发者社区资源来解决。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部