android 转场动画 共享元素,关于android:四步通过Glide实现共享元素无缝转场效果...
读完这篇文章, 你就会晓得应用Glide等图片加载库实现共享元素转场成果,以及如何解决各种可能加载状态。通过共享转场动画,能够晋升利用交互体验,让用户应用起来更愉悦。 共享元素转场成果是Material Design的一个重要的转场成果. 如果图片资源是动态本地的,那么实现起来是容易的。然而通过网络下载图片并且创立一个无缝的动画成果就比拟辣手了。
开始之前
此篇文章是在开发Toast App时,对于转场成果的一个总结. 该app是TOAST – Android 开发者团聚(波兰最大的Android开发者团聚网站)的客户端app. app中蕴含了每个TOAST事件,定期讲座和流动照片。 咱们次要用共享元素转场作为页面切换成果。同时应用Glide来获取所有的图片。 本文中介绍的办法也应实用于其余图像加载库,例如Picasso 或者 Fresco (您须要找到Glide特定性能的绝对应的代码实现). 为此我制作了一个示例演示程序, 公布在Github上. 所有代码段均来自此示例程序。 咱们应用一组网格图片作为开始. 当用户点击一张图片, 会关上一个新的Activity,图片会裁剪并填充整个屏幕。上面是应用Glide加载图片的相干代码:
fun ImageView.load(url: String) {
Glide.with(this)
.load(url)
.apply(RequestOptions.placeholderOf(R.drawable.placeholder))
.into(this)
}
咱们想要的成果:
第一步: 共享过渡
咱们能够通过增加正确options来创立过渡成果,批改 goToDetails 办法如下:
MainActivity.kt
fun goToDetails(url: String, imageView: View) {
val options = ActivityOptionsCompat.makeSceneTransitionAnimation(this, imageView, imageView.transitionName).toBundle()
Intent(this, DetailActivity::class.java)
.putExtra(IMAGE\_URL\_KEY, url)
.let {
startActivity(it, options)
}
}
当初, 咱们在下面的办法中传入要共享的view,并设置transitionName。这个名称在每个activity中必须是惟一的,主视图和详情页面相对应的view的transitionName则要雷同,在此为了简化,咱们应用图片url作为transitionName:
DetailActivity.kt
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity\_detail)
val url = intent.getStringExtra(IMAGE\_URL\_KEY)
detailImage.transitionName = url
detailImage.load(url)
}
ImageAdapter.kt
inner class ImageViewHolder(view: View) : RecyclerView.ViewHolder(view) {
fun bind(url: String) {
(itemView as ImageView).apply {
load(url)
transitionName = url
setOnClickListener { onClick(url, it) }
}
}
}
好了, 咱们有了过渡动画如下:
但的是这并不是咱们想要的成果????
第二步: 推延过渡成果
Glide须要工夫将图片加载到ImageView. 这就是为什么在onCreate中 咱们不得不推延过过渡动画成果,直到图片下载实现才能够开始进行过渡成果:
DetailActivity.kt
override fun onCreate(savedInstanceState: Bundle?) {
...
supportPostponeEnterTransition()
detailImage.load(url) {
supportStartPostponedEnterTransition()
}
}
GlideLoader.kt
fun ImageView.load(url: String, onLoadingFinished: () -> Unit = {}) {
val listener = object : RequestListener {
override fun onLoadFailed(e: GlideException?, model: Any?, target: Target?, isFirstResource: Boolean): Boolean {
onLoadingFinished()
return false
}
override fun onResourceReady(resource: Drawable?, model: Any?, target: Target?, dataSource: DataSource?, isFirstResource: Boolean): Boolean {
onLoadingFinished()
return false
}
}
Glide.with(this)
.load(url)
.apply(RequestOptions.placeholderOf(R.drawable.placeholder))
.listener(listener)
.into(this)
}
当初咱们在过渡前图片曾经加载了,但能够看到的是在进入过渡之前以及退出过渡之后会有奇怪的毛刺,咱们将在下一步解决它。 第三步: 禁止转换 之所以有这个毛刺成果是因为Glide在加载时进行的优化。 默认的, Glide为了匹配指标view会调整图片大小并裁剪图片。然而Android过渡框架在过渡开始时会从指标视图获取图像,并且将它转换到源视图的图像。咱们能够让Glide不进行这些优化:
GlideLoader.kt
`fun ImageView.load(url: String, onLoadingFinished: () -> Unit = {}) {
...
val requestOptions = RequestOptions.placeholderOf(R.drawable.placeholder)
.dontTransform()
Glide.with(this)
.load(url)
.apply(requestOptions)
.listener(listener)
.into(this)
}`
咱们也能够在Glide中应用原始图片大小。这会缩小过渡提早,因为原始图片会存在于内存中,不会在磁盘缓存中。留神:此操作会让你的的程序变慢,须要小心应用。
当初能够失常应用了,但在一些谬误链接图片获取未加载实现但图片就会有一个小问题。
第四步: 仅在Cache时传输
咱们要在任何条件下都能够无缝过渡,最简略的形式是从缓存中获取图片 (或者如果图片未加载实现时, 就应用占位图)。
DetailActivity.kt
override fun onCreate(savedInstanceState: Bundle?) {
...
detailImage.load(url, loadOnlyFromCache = true) {
supportStartPostponedEnterTransition()
}
}
GlideLoader.kt
fun ImageView.load(url: String, loadOnlyFromCache: Boolean = false, onLoadingFinished: () -> Unit = {}) {
...
val requestOptions = RequestOptions.placeholderOf(R.drawable.placeholder)
.dontTransform()
.onlyRetrieveFromCache(loadOnlyFromCache)
...
}
当然,这意味着用户关上详情页面时,在图片加载实现之前,只会显示占位图。它会在过渡完结后通过第二次申请来修复:
DetailActivity.kt
override fun onCreate(savedInstanceState: Bundle?) {
...
window.sharedElementEnterTransition = TransitionSet()
.addTransition(ChangeImageTransform())
.addTransition(ChangeBounds())
.apply {
doOnEnd { detailImage.load(url) }
}
}
最终,咱们有了一个十分棒的过渡转场成果,它能够工作在各种条件下。您能够在GitHub上查看整个示例,也能够在Toast App中查看更多示例。
相干链接
Workcation App – Part 4. Shared Element Transition with RecyclerView and Scenes
Meaningful Motion with Shared Element Transition and Circular Reveal Animation Workcation App – Part 1. Fragment custom transition How to Learn Android Development Programming – 6 Steps for Beginners 6 Misconceptions about TDD – Part 4. There is one right granularity of steps
最初
一点题外话:
咱们有《Android学习、面试;文档、视频资源收费获取》,可复制链接后用石墨文档 App 或小程序关上链接或者私信我材料支付。
https://shimo.im/docs/TG8PDh9…
android 转场动画 共享元素,关于android:四步通过Glide实现共享元素无缝转场效果...相关推荐
- 四步通过Glide实现共享元素无缝转场效果
读完这篇文章, 你就会知道使用Glide等图片加载库实现共享元素转场效果,以及如何处理各种可能加载状态.通过共享转场动画,可以提升应用交互体验,让用户使用起来更愉悦. 共享元素转场效果是Materia ...
- android 转场动画兼容问题,【Android】关于ARouter转场动画的问题
实现从主页跳转到搜索页,再从搜索页回退主页 withTransition(int resId,int resId) 这个方法两个参数 第一个的意思是, A 到 B, B 的入场动画 第二个的意思是,A ...
- 高逼格Android转场动画
前言 转场动画在交互上非常有优势,本文从转场动画的使用场景和方法起,最后是实现掘金中用户头像的转场动画. 转场动画适用的版本 Activity transition APIs 只有在Android 5 ...
- 高逼格Android转场动画,轻松实现掘金用户头像转场动画
前言 转场动画在交互上非常有优势,本文从转场动画的使用场景和方法起,最后是实现掘金中用户头像的转场动画. 转场动画适用的版本 Activity transition APIs 只有在Android 5 ...
- android 元素共享动画,android转场动画--共享元素(Shared Element)
什么是共享元素呢?可以理解为当页面跳转是,看起来一个View属于界面A又属于界面B. 看一下下边这个效果: 在这个转场动画中,图片和文字都是共享元素,具体怎么实现这种效果呢? Step1 首先需要先在 ...
- android 转场动画 监听,Android 中的转场动画及兼容处理
Android 中的动画有很多,除了在一个界面上使用帧动画.属性动画将一个或多个 View 进行动画处理以外,还可以用于两个界面之间过渡.跳转.在 Android 5.0 之前,我们已经有了 over ...
- Android转场动画(View Activity ARouter)
为什么要使用转场动画?在页面切换或者UI展示的时候,如果没有设计转场动画,那么状态场景的切换就是瞬间发生的,这样就非常突兀,没有视觉效果,所以在App开发的过程中,设计转场动画,是必不可少的. 1.揭 ...
- android转场动画,让你的APP瞬间绚丽起来
友好的交互体验能够吸引眼球,android API 21(5.0)后系统内置了Activity之间的切换动画,不仅可以让用户看起来舒服,而且实现起来也特别简单. 一.通过overridePending ...
- 腾讯T7手记:Android转场动画的前世今生!
前一段时间做图片查看器的升级时,在打开图片查看器的时,找不到好的过渡方式. 有位大佬给我推荐了Android最新的Material Motion动画,虽然最终没有给我们的App安排,但给我学习Mate ...
最新文章
- zoj 1010 (线段相交判断+多边形求面积)
- android客户端访问服务端tomcat
- 第六周项目三-IP地址类
- C#创建Access
- ABB SocketReceive 套接口 函数
- 存储世界瞬息万变 SSD掀行业浪潮
- Java核心编程总结(二、抽象类与接口),linux音频驱动架构
- 【ElasticSearch】Es 启动流程 源码分析
- Java中如何跳出多重for循环
- Linux中Apache服务器的简单配置
- 汉诺塔五层C语言程序,汉诺塔的c语言程序
- 计算机录屏幕和声音的软件是什么,哪个录屏软件可以录内部声音?分享开启与调节的方法...
- SQL Server 安全篇——安全元数据(2)——安全对象(Securable)元数据
- stata 自相关专题【计量经济系列(五)】
- 车辆搜索 -使用triplet loss 训练车辆识别模型
- Java 获取某年的第一天和最后一天
- EventLog Analyzer:高效保护网络安全的强大工具
- 打车日记 - 谨慎的小哥哥
- Axure 8.1.0.3377 注册激活码
- KeePass密码管理软件 ---下载安装及汉化
热门文章
- 音乐flac怎么转为mp4?
- 科大奥锐干涉法测微小量实验的数据_基于组件的虚拟物理仿真实验软件V4.0
- 计算机二级容易,计算机二级哪个最容易考过?
- 大型智慧校园系统源码 智慧班牌 智慧安防 家校互联 智慧校园小程序源码
- LeetCode-5040-边框着色-C语言
- java input.close()_Java InputStream close()方法与示例
- Waves效果器离线安装包-Waves v9r30 Offline Install WiN-MAC
- 华为2016开发者大赛:赢的不仅仅是百万元奖金
- 计算机导论ppt创意作品,《计算机导论》全套PPT电子课件教案-第1章 绪论.ppt
- 大数据行业怎么样?未来发展好么?