HarmonyOS：合理使用页面间转场（1）

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤博客园地址：为敢技术（https://www.cnblogs.com/strengthen/ ）
➤GitHub地址：https://github.com/strengthen
➤原文地址：https://www.cnblogs.com/strengthen/p/18499435
➤如果链接不是为敢技术的博客园地址，则可能是爬取作者的文章。
➤原文已修改更新！强烈建议点击原文地址阅读！支持作者！支持原创！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

一、概述

页面间转场是用户从一个页面切换到另一个页面时的过程，一个无缝流畅的转场动效可以提升用户的交互体验。在实际开发过程中，我们需要把上述设计视角转换为开发实现视角，即使用HarmonyOS系统提供的转场能力和动画能力来实现设计的场景和动效。

二、转场场景设计

基于用户行为和应用设计模式，总结出以下常见的转场场景。

1、层级转场：是指在用户界面中，从一个层级结构的界面状态转换到另一个层级结构的界面状态的过程，它通常用于在应用中进行页面间的导航和视图层级的变化。下图中使用的是左右位移遮罩动效，在列表展开场景下的用例。这种场景通常是完整的页面替换，这种效果在转场过程中，页面元素会以左右方向进行位移，并使用遮罩效果来过渡，这种转场效果常用于切换不同页面。或者展示不同内容的情况，能够给用户带来明显的页面变化感。

下图展示的是一镜到底动效，这种效果在单体独立卡片展开过程中，整个页面会以一种平滑的方式，从一个场景过渡到另一个场景，仿佛是通过一镜到底的方式切换，这种转场效果常用于展示不同页面之间的关联性，能够给用户带来流畅的视觉体验。

对于层级转场，推荐使用系统转场，页面转场采用左右位移的运动方式，不应单帧直接切换或上下位移切换，曲线优先使用弹簧曲线。

2、通用转场：是一种广泛适用于不同情境和应用类型的页面过渡效果，目的是提供一种通用的、可重复使用的方式，以改善用户页面之间的切换，增强用户体验。其关键点在于要适用各种应用情境，包括不同类型的应用（例如：社交媒体、电子商务、新闻等）和不同操作（例如：导航、搜索、编辑等）。这就需要一种通用的，不需要复杂操作的动效来完成跳转任务，而缩放能够满足绝大多数用户的需求和视觉体验感受，这种效果在转场过程中，页面元素会以放大或缩小的方式进行过渡，这种转场效果常用语突出某个元素，或者展示不同界面之间的层次感，能够给用户带来视觉上的冲击和焦点转移。

 3、场景解构：

转场：是由交互行为引起的界面变化，分析界面元素在过程中的意义，定义其在转场中所在的类型，并将它们进行分类，元素所属的类别会影响他们使用怎样的转场能力，同时也将决定它用什么类型的曲线和时长。

（1）、进场元素：转场中新出现的元素，一般是结果界面上的构成元素。

（2）、出场元素：转场中消失的元素，一般是上一界面的构成元素。

（3）、持续元素：转场中持续存在的元素，可以是元素在布局上的变化。也可以是某种连续性的动画效果。整个过程无中断。

（4）、静止元素：转场中无任何变化的元素。

三、转场场景开发

开发人员接收到设计需求后，需要选择合适的转场能力完成该设计，HarmonyOS为开发者提供了三种转场方式：

1、UIAbility转场：UIAbiity是系统调度的最小单元。通过调用startAbility()方法启动UIAbility实现在设备内的功能模块之间的跳转。该UIAbility可以是应用内的其他

UIAbility，也可以是其他应用的UIAbility（例如启动三方支付UlAbility) .

2、页面路由（router）：页面路由指在应用程序中实现不同页面之间的跳转和数据传递。HarmonyOS提供了Router模块，通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。

3、组件转场：组件转场是指通过HarmonyOS提供的各类组件来实现转场效果，以便更加便捷地展示不同的内容或功能模块。在组件转场中，可以使用诸如页面切换动画、过渡效果、布局变化等方式来实现页面之间的平滑切换。

选择转场方式时，开发者需要考虑用户体验、界面一致性和业务需求。确保所选导航组件能够提供直观、易用的导航方式。帮助应用实现更好的转场效果。

为了简化开发者工作，HarmonyOS提供了以下高级模板，将属性动画和出现消失动画封装，开发者只需调用接口，可以轻松的完成页面转场。

四、最佳实践案例

下面介绍表格中的一些具体场景，包含层级转场和通用转场。

1、案例一：在下图场景中，开发者需要为每个坐标icon创建对应的页面，并在点击每个坐标icon时，将对应页面入栈。同时需要处理页面跳转和导航栏的显示与隐藏，这样的实现方式会导致路由栈的对应关系变得复杂。不利于开发者的设计和维护，相比之下使用Navigation可以简化开发流程。Navigation提供了一套统一的导航管理机制，用于管理应用中的页面栈和页面跳转。它会自动为每个坐标icon生成对应的页面，并提供默认的点击响应处理。

Navigation组件的页面包含主页和内容页，主页由：标题栏、内容区和工具栏组成。可在内容区中使用NavRouter子组件实现导航栏功能。

（1）、首先分别对地图上的每一个mapElement进行渲染和链接，

（2）、之后内容页通过NavRouter导航组件显示，默认提供点击响应处理。

（3）、AnimIcon渲染导航位置图标资源。

（4）、NavDestination显示导航内容区。其中IntroductionPage即为即将跳转的对应页面。

（5）、mode指定点击NavRouter。跳转到NavDestination页面时使用的路由模式，此处不需要保存原页面，选择replace方式，跳转后页面销毁，且该页面信息从路由栈中清除。

（6）、将mode属性设置为NavigationMode.Stack。Navigation组件即可设置为单页面显示模式。

至此，就完成了为每个坐标icon创建对应的页面功能。

2、案例二：Tab案例， 在这个场景下，需要完成的效果是在用户主页切换显示：收藏、浏览、成就三个页面。选择使用Tabs组件来实现标签页切换。Tabs组件可以对页面内容进行分类，其提供了标签页切换的模板，可以方便地在主页上展示标签，并通过点击不同的标签页来切换显示内容。Tabs组件的内置左右位移遮罩动效可以很好地满足界面设计的需求，给用户带来良好的交互体验。

Tabs组件的页面组成包含两个部分：

（1）、TabContent：是内容页。TabContent对应一个切换页签的内容视图。

（2）、TabBar：是导航页签栏。

通过配置tabs的属性和事件，开发者可以自定义标签页的样式切换效果，以及处理标签页切换时的逻辑操作。这样可以提高开发效率。同时确保标签页切换的功能和效果符合需求。以此类推编写浏览列表页面和成就展示页面，至此一个包含三个页面的Tabs就开发完成了。

3、模态转场模版实现通用转场。

相比于常规的页面跳转方式，模态转场模板可以让新的界面覆盖在旧的界面上，使得旧的界面不消失，从而避免了用户产生截断的感觉。并且，使用模态转场可以提供更快速的页面跳转效果，这样用户可以直接在当前界面上查看大图，并且不会感到界面的切换和截断，当用户想要返回上级详情页时，只需要点击大图的空白处即可关闭大图，恢复到原先的界面状态。

通过在当前页面上弹出模态框或对话框，可以让用户专注于当前操作同时不会丢失原页面的上下文，更流畅地浏览和操作应用。同时，模态转场也能够减少页面销毁和创建的开销，从而提高应用的性能和响应速度。

代码实现：

（1）、首先，监督图片点击事件，设置动画参数，构建弹性动画对象，

（2）、之后，通过bindContentCover属性为组件绑定全屏模态页面，在组件插入和删除时，可通过设置转场参数，ModalTransition显示过渡动效。

根据上述两步，一个简单的模态转场就开发好了。