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…