如何延迟Fragment的导航过渡

简介: 做应用提高用户体验是很关键的,对于用户体验来说有一件事是不能回避的,就是页面切换的过渡动画。因为后一个页面可能会加载数据,所以切换时后一个页面是空白的导致用户体验比较差。那么如果下一个页面数据加载可能很快,为了提供流畅的顶级导航过渡,可不可以等待第二个屏幕加载数据,然后再启动动画?Android中的Fragment就提供了这种功能,通过它可以推迟fragment的载入,这样在界面通过动画过渡到第二个屏幕之前,第二个屏幕上的界面元素(通常是从网络获取的图片)已做好显示准备。这便是:postponeEnterTransition()和startPostponedEnterTransition()

前言


做应用提高用户体验是很关键的,对于用户体验来说有一件事是不能回避的,就是页面切换的过渡动画。因为后一个页面可能会加载数据,所以切换时后一个页面是空白的导致用户体验比较差。那么如果下一个页面数据加载可能很快,为了提供流畅的顶级导航过渡,可不可以等待第二个屏幕加载数据,然后再启动动画?


Android中的Fragment就提供了这种功能,通过它可以推迟fragment的载入,这样在界面通过动画过渡到第二个屏幕之前,第二个屏幕上的界面元素(通常是从网络获取的图片)已做好显示准备。这便是:postponeEnterTransition()startPostponedEnterTransition()


postponeEnterTransition


这个函数会延迟Fragment的导航过渡直到执行了startPostponedEnterTransition()executePendingTransactions()。所以这个函数给Fragment提供了推迟动画直到数据都加载完成的能力。

需要注意的是,这个函数必须在fragment被添加到FragmentTransaction之前执行,或者在onCreate, onAttach, onCreateView这几个生命周期中执行。而已这个函数之后必须执行startPostponedEnterTransition()executePendingTransactions,否则fragment的导航过渡无法完成。


startPostponedEnterTransition


这个函数与postponeEnterTransition()搭配使用,可以启动被postponeEnterTransition推迟的导航过渡。而且在postponeEnterTransition()之后必须执行startPostponedEnterTransition()executePendingTransactions,否则fragment的导航过渡无法完成。

这里注意executePendingTransactions()也有同样的效果,如果这次延迟时间被executePendingTransactions()干扰了,那么在startPostponedEnterTransition()执行之前,过渡动画可能没执行也可能已经执行了。所以在使用过程中要特别注意是否有executePendingTransactions()干预。


executePendingTransactions


既然提到了executePendingTransactions(),那么也一起说一下这个函数。

当一个fragment添加到FragmentTransaction并commit之后,导航过渡其实并不是立刻执行,而是被安排异步的在主线程中执行(这点我想大家都比较了解了,所以FragmentTransaction也提供了commitNow()函数)。而executePendingTransactions()可以让这个动作立刻执行,所以它也会强制因postponeEnterTransition()而推迟的导航过渡直接启动。

所以在使用postponeEnterTransition()的时候,一定要注意executePendingTransactions()的存在。


总结


使用起来还是比较简单的,但是注意不能滥用。比如fragment页面数据很多,需要的网络请求可能时间较长,如果你在请求结束后再执行startPostponedEnterTransition(),那么用户点击之后会在当前页面停顿很久才导航到新页面,这样用户体验会很差。所以它适合那些加载较快的操作,比如网络图片,这样在导航过渡时,尤其是有共享元素的时候,下一个页面的对应内容已经准备好了,动画效果会更好。


目录
相关文章
Flutter ListView懒加载(滑动不加载,停止滑动加载)
前言:为了更好的减小网络的带宽,使得列表更加流畅,我们需要了解懒加载,也称延迟加载。关于上一章的登录界面,各位属实难为我了,我也在求ui小姐姐,各位点点赞给我点动力吧~
|
22天前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
50 7
|
5月前
|
监控 数据可视化 图形学
重构U3D动画系统:运用Animator Controller层叠状态机优化游戏表现
【7月更文第11天】随着Unity 3D(简称U3D)游戏开发的不断深入,高效且流畅的动画系统成为了提升玩家体验的关键因素。本文将深入探讨如何通过重构U3D项目的动画系统,利用Animator Controller的层叠状态机(Layered State Machine)特性,显著提高动画的处理效率与游戏的流畅度。我们将通过一个实战示例,展示如何设置和优化状态机,进而实现角色动画的细腻控制与高效切换。
136 0
|
5月前
uniapp实战 —— 可滚动区域 scroll-view (自适配高度,下拉刷新)
uniapp实战 —— 可滚动区域 scroll-view (自适配高度,下拉刷新)
1311 0
|
7月前
|
XML 前端开发 JavaScript
CSS中动画、过渡、定位、浮动的作用
CSS中动画、过渡、定位、浮动的作用
|
XML 数据格式
某个Fragment单独增加沉浸式效果
某个Fragment单独增加沉浸式效果
110 0
Flutter利用ScrollController获取、控制滚动组件的滚动位置
Flutter利用ScrollController获取、控制滚动组件的滚动位置
|
存储 JavaScript 前端开发
Flutter说:详解生命周期、状态管理及局部重绘(上)
生命周期 flutter的生命周期其实有两种:StatefulWidget和StatelessWidget。 这两个是flutter的两个基本组件,名称已经很好表明了这两个组件的功能:有状态和无状态。
401 0
|
Dart 开发者
【Flutter】监听滚动动作 控制组件 透明度渐变 ( 移除顶部状态栏空白 | 帧布局组件 | 透明度组件 | 监听滚动组件 )(三)
【Flutter】监听滚动动作 控制组件 透明度渐变 ( 移除顶部状态栏空白 | 帧布局组件 | 透明度组件 | 监听滚动组件 )(三)
235 0
【Flutter】监听滚动动作 控制组件 透明度渐变 ( 移除顶部状态栏空白 | 帧布局组件 | 透明度组件 | 监听滚动组件 )(三)
|
存储 缓存 前端开发
【Android 性能优化】布局渲染优化 ( 过渡绘制 | 背景设置产生的过度绘制 | Android 系统的渲染优化 | 自定义布局渲染优化 )
【Android 性能优化】布局渲染优化 ( 过渡绘制 | 背景设置产生的过度绘制 | Android 系统的渲染优化 | 自定义布局渲染优化 )
217 0
【Android 性能优化】布局渲染优化 ( 过渡绘制 | 背景设置产生的过度绘制 | Android 系统的渲染优化 | 自定义布局渲染优化 )