如何延迟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(),那么用户点击之后会在当前页面停顿很久才导航到新页面,这样用户体验会很差。所以它适合那些加载较快的操作,比如网络图片,这样在导航过渡时,尤其是有共享元素的时候,下一个页面的对应内容已经准备好了,动画效果会更好。


目录
相关文章
|
Kubernetes 关系型数据库 文件存储
手把手教你完成极空间 NAS Docker 镜像加速配置
本教程详细介绍了如何在极空间NAS上配置轩辕镜像加速器,以提升Docker镜像的下载速度与稳定性。内容涵盖账号注册、网络确认、加速器设置及验证方法,并提供常见问题解决方案,帮助用户高效完成容器化应用部署。
5130 1
|
数据采集 存储 NoSQL
提高爬虫性能的 5 个关键技巧:从并发到异步执行
本文介绍了提高网络爬虫性能的五个关键技巧:并发请求、异步执行、使用代理IP、限制请求频率与休眠时间、优化数据提取与存储。结合拼多多的实际案例,展示了如何通过这些技术优化爬虫效率,确保数据采集的高效性和稳定性。
1233 0
|
开发工具 C++ git
如何美化 GitHub 个人主页?
如何美化 GitHub 个人主页?
|
JavaScript 安全 API
vue3注册添加全局实例属性的方法,如何在setup函数中调用
vue3注册添加全局实例属性的方法,如何在setup函数中调用
2240 2
|
小程序
微信小程序如何跳转到外部小程序
微信小程序如何跳转到外部小程序
942 0
|
Ubuntu
Ubuntu中安装Cmake
Ubuntu中安装Cmake
786 0
|
数据采集 机器学习/深度学习 算法
【Pytorch神经网络实战案例】07 预测泰坦尼克号上生存的乘客
数据之间没有任何连续性的数据称为离散数据,例如数据中的男、女。
893 0
|
存储 机器学习/深度学习 自然语言处理
PyTorch Python API详解大全(持续更新ing...)(上)
PyTorch Python API详解大全(持续更新ing...)
PyTorch Python API详解大全(持续更新ing...)(上)
|
定位技术
一个草根的20年逆袭路:我在小城卖手机
这位85后,是农民工的孩子,只有初中学历,一路奋斗成了“开发达人”和当地的“手机大王”,26家门店年流水上亿元。别人关店撤离的夕阳产业,在他手下却能化腐朽为神奇。他是怎么做到的?
745 0
一个草根的20年逆袭路:我在小城卖手机
|
缓存 JavaScript 前端开发
CSS vs. JS Animation: 哪个更快
# CSS vs. JS Animation: 哪个更快? CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且,Adobe和 Google竟然一直在发布可以媲美原生应用的富媒体移动站点? 这篇文章将会逐点讲解基于JavaScript的DOM动画库,比如Velocity.js和GSAP,是如何比jQuery和基于CSS的动画库高效的。
1269 0

热门文章

最新文章