【HarmonyOS NEXT】使用Navigation配合NavDestination实现导航页面跳转时，能否对跳转的动画进行自定义

最新推荐文章于 2024-09-14 18:21:07 发布
最新推荐文章于 2024-09-14 18:21:07 发布
阅读量298 收藏 3
点赞数 3
文章标签： harmonyos
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mayism123/article/details/139775603
版权

【关键字】

Navigation / NavDestination / 页面跳转 / 自定义动画

【问题描述】

使用Navigation配合NavDestination实现导航页面跳转的时候，默认的是B页面从右到左出现A。目前想要的转场效果是push时B页面从下到上出现，pop时B页面从上到下消失，这样的效果使用Navigation配合NavDestination作为导航转场时如何实现？在官方的导航转场文档中并未找到相关内容，并且因为APP导航栈管理需要，只能使用Navigation配合NavDestination作为导航，无法使用router作为跳转。

【解决方案】

可以通过navigation的NavigationAnimatedTransition方法来自定义转场动画。

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-navigation-0000001815927580#ZH-CN_TOPIC_0000001815927580__navigationanimatedtransition11

文档中的示例三就有相关的实例，能够按照条件设置转场动画以及pop和push。

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-navigation-0000001815927580#ZH-CN_TOPIC_0000001815927580__%E7%A4%BA%E4%BE%8B3

Mayism123
关注
【HarmonyOS NEXT应用开发】案例41：基于自定义注解和代码生成实现路由框架
xzs51job的专栏
08-16 46
在应用开发中无论是出于工程组织效率还是开发体验的考虑，开发者都需要对项目进行模块间解耦，此时需要构建一套用于模块间组件跳转、数据通信的路由框架。修改loginModule模块的hvigorfile.ts文件(loginModule/hvigorfile.ts)，加载插件。在entry中的build-profile.json5中配置动态import。在entry中的EntryAbility.onCreate中初始化路由组件。在entry中的oh-package.json5中引入依赖。
【HarmonyOS NEXT应用开发】案例10：基于子窗口实现应用内悬浮窗
xzs51job的专栏
08-12 53
app应用会使用悬浮窗/悬浮球的方式来给用户展示一些应用重要&便捷功能的入口，类似android和iOS应用中常见的应用内可拖拽的悬浮球和小窗口视频悬浮窗，点击悬浮窗修改悬浮窗样式和响应事件跳转页面，在跳转页面后依然可以显示在屏幕中上个页面拖拽后的固定位置等。场景三：可响应正常点击事件，可通过触发拖动使悬浮窗的移动，根据最后手势停留位置，做动画靠屏幕左或靠右显示，跳转和返回上级页面后悬浮窗依然存在，且相对手机屏幕位置不变。悬浮窗的窗口大小自适应组件，子窗口中页面设置了宽高，需要让子窗口自适应页面组件大小。
自定义Navigation转场动画
args_的博客
12-16 1180
碰巧遇到这个需求"自定义转场动画"，我记得之前似乎是要自定义一个Navigation，现在不用了。简单的看了下kittenyang的笔记，有些东西还是要记录一下，也方便以后研究。
Android Navigation 过渡动画
丿灬安之若死
08-14 1300
里面很简单 一个Fragment但是里面用到了my_nav。用到了俩左边按钮和右边按钮的icon。剩下的我用哔哩哔哩展示把。为了给大家一个更为骚而快的操作效果。-》可以跳转SecondedFragment用的是从右边边向右边滑动的动画。-》可以跳转FirstFragment 用的是从左边向右边滑动的动画。后续看下如何操作的朋友可以看下哔哩哔哩的教学视频哦。那么今天就来一个从很基础开始的教程。其实第二个Fragment和他一样。但是没有从很基础开始。就是为了完整教程来吧。那么预览我就给一个咯。........
HarmonyOS Next开发学习手册——组件导航 (Navigation) (推荐)
maniuT的博客
07-12 1826
Navigation通过 customNavContentTransition 事件提供自定义转场动画的能力，通过如下三步可以定义一个自定义的转场动画。构建一个自定义转场动画工具类CustomNavigationUtils，通过一个Map管理各个页面自定义动画对象CustomTransition，页面在创建的时候将自己的自定义转场动画对象注册进去，销毁的时候解注册；
Navigation常见场景&解决方案
sdasdas12的博客
05-08 901
Navigation通过customNavContentTransition事件提供自定义转场动画的能力，当转场开始时，通过回调函数告知开发者，告知此次动画from（从哪来）、to（到哪去）、是Push、Pop亦或是Repalce。这里需要注意当为根视图时，NavContentInfo的name值为undefined。开发者可以在customNavContentTransition的回调函数中进行动画处理，返回NavigationAnimatedTransition自定义转场协议已实现自定义转场。
学习鸿蒙基础（11）
huyawenz的博客
04-02 1820
无论是实现音频的播放录制、采集，还是视频的播放、切换、循环，亦或是相机的预览、拍照等功能，媒体组件都是必不可少的。常见的视频播放场景包括观看网络上的较为流行的短视频，也包括查看我们存储在本地的视频内容。NavDestination是配合NavRouter使用的特殊子组件，用于显示Navigation组件的内容页。其中src指定引用的网页路径，controller为组件的控制器，通过controller绑定Web组件，用于实现对Web组件的控制。动画：1、页面内的动画（属性动画、显示动画、组件内转场动画）。
HarmonyOS NEXT 使用Navigation实现多设备适配案例
2401_84181731的博客
04-11 598
else if (this.leftImageWidth = CONFIGURATION.LEFT_IMAGE_RIGHT_LIMIT_SIZE) { // 当leftImageWidth大于等于310vp时，设置左右Image为固定值，实现停止滑动效果。
vue实现未登录跳转到登录页面的方法
10-18
为了实现未登录跳转至登录页面的功能，可以利用vue-router提供的导航守卫（Navigation Guards）。导航守卫允许你在路由改变前进行一些处理，例如判断用户是否登录，是否具有访问某个路由的权限。 文档中提供的示例...
Vue项目页面跳转时浏览器窗口上方显示进度条功能
10-15
在Vue项目中，为了提升用户体验，我们经常需要在页面跳转时显示浏览器窗口上方的进度条，以指示页面加载状态。这种功能可以帮助用户感知页面正在加载，减少他们因等待而产生的不耐烦感。实现这一功能，我们可以借助...
HarmonyOS NEXT应用开发——Navigation开发 页面切换场景范例
maniuT的博客
03-05 1364
在应用开发时，我们常常遇到，需要在应用内多页面跳转场景时中使用Navigation导航组件做统一的页面跳转管理，它提供了一系列属性方法来设置页面的标题栏、工具栏以及菜单栏的各种展示样式。除此之外还拥有动态加载，navPathStack路由跳转。本文就以Navigation页面切换范例为例，来展开讲解Navigation以上的技术点，帮助开发者快速学习。ArkUI中，应用内导航组件Navigation一般作为Page页面的根容器， Navigation组件主要包含主页和内容页。
【HarmonyOS NEXT】通过NavDestination组件触发的页面跳转，目标页面的生命周期函数不执行
Mayism123的博客
02-29 869
Navigation / NavDestination / 页面跳转 / 生命周期函数 / onPageShow / onPageHide / onBackPress/ 回调 / onShown / onHidden / onBackPressed。通过NavDestination组件触发的页面跳转，目标页面的生命周期函数onPageShow、onPageHide、onBackPress不执行。通过router.pushUrl跳转页面，页面生命周期函数才可以执行。
TransitionAnimation自定义转场动画
weixin_33921089的博客
12-04 474
    在iOS 7之后，苹果就开放了自定义转场的相关api，现在都快iOS 12了，一直都没有好好研究转场动画，一个是之前没有重视，觉得花里胡哨的，另外一个是所做的项目中没有这样的转场动画需求。这里说的转场动画和上一篇CAAnimation 系统动画中CATransition动画不是一个概念，上一篇指的是单个View的转场特效，这里指的是整个控制器的转场特效。其实写上篇文章的目前也是为今天打下铺...
Android跳转-ARouter详细使用教程
热门推荐
KeepStudy
09-14 2万+
一、简介Android平台中对页面、服务提供路由功能(跳转)的一个库1.1 最新版本 模块 arouter-api arouter-compiler arouter-annotation 最新版本 1.2 实例图片1.3 功能介绍 支持直接解析标准URL进行跳转，并自动注入参数到目标页面中 支持多模块工程使用 支持添加多个拦截器，自定义拦截顺序 支持依赖注入，可单
navigation的action跳转,切换动画和传参
王的备忘录
02-23 1412
1,action 在navigation_main.xml中设置action <action android:id="@+id/action_dashBoardSampleFragment_to_notificationSampleFragment" app:destination="@id/notificationSampleFragment"/> action设置好了之后，我们可以执行下面代码进行跳转： findNavController().navigate(R.id.action
HarmonyOS Next鸿蒙扫一扫功能实现
最新发布
JohnLiu的博客
09-14 466
HarmonyOS Next鸿蒙扫一扫功能实现
HarmonyOS开发实战（ Beta5.0）蓝牙实现服务端和客户端通讯详解
weixin_55362248的博客
09-12 1330
客户端以特定服务UUID作为过滤条件扫描服务端，连接到扫描的设备后通过setCharacteristicChangeNotification接口向服务端发送‘通知心率跳动特征值变动’的请求，以便收到服务端该特征值变动的通知消息。
next.js next/navigation 手动跳转携带参数
06-03
在 `next.js` 和 `next/navigation` 中，您可以使用编程式导航来手动跳转到其他页面并携带参数。下面是一些常见的方法： 1. 使用 `next/router` 模块的 `push()` 函数：您可以使用 `push()` 函数来将用户导航到其他页面，并携带查询参数或路由参数。例如，以下示例演示如何使用 `push()` 函数在 `onClick` 事件中手动导航到 `/post` 页面并携带 `id=123` 查询参数： ``` import { useRouter } from 'next/router' function handleClick() { const router = useRouter() router.push({ pathname: '/post', query: { id: '123' } }) } export default function Home() { return ( <div> <h1>Home page</h1> <button onClick={handleClick}>Go to Post</button> </div> ) } ``` 2. 使用 `next/link` 组件的 `href` 属性：您可以使用 `next/link` 组件的 `href` 属性来创建链接，并在需要时手动触发导航。例如，以下示例演示如何使用 `next/link` 组件在 `onClick` 事件中手动导航到 `/post` 页面并携带 `id=123` 查询参数： ``` import Link from 'next/link' function handleClick() { window.location.href = '/post?id=123' } export default function Home() { return ( <div> <h1>Home page</h1> <Link href='/post?id=123'> <a>Go to Post</a> </Link> <button onClick={handleClick}>Go to Post</button> </div> ) } ``` 综上所述，`next.js` 和 `next/navigation` 提供了多种方法来手动跳转到其他页面并携带参数。您可以根据自己的需求选择最适合的方法来实现导航。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值