使用Glide的简单共享元素转换滞后

Question

我在两个活动之间有一个非常简单的过渡，有时，图像停在中间，滞后，闪烁黑色。

我已经在Glide中多次使用共享元素转换，但这次我不能让它不延迟。

这是第一个活动：

val intent = Intent(this, MediaZoomImageActivity::class.java)
intent.putExtra(MediaZoomActivity.ZOOM_MEDIA_URL, submission.imageUrl)

val bundle = ActivityOptionsCompat.makeSceneTransitionAnimation(this,
            post_image_parallax, ViewCompat.getTransitionName(post_image_parallax)).toBundle()

startActivity(intent, bundle)

这是第二个活动：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_zoom_image)
    postponeEnterTransition()

    back.setOnClickListener { finish() }

    val url = intent.getStringExtra(ZOOM_MEDIA_URL)
    Glide.with(this)
            .load(url)
            .apply(RequestOptions().diskCacheStrategy(DiskCacheStrategy.RESOURCE))
            .into(media_zoom_image)

    media_zoom_image.viewTreeObserver.addOnPreDrawListener(object : ViewTreeObserver.OnPreDrawListener {
        override fun onPreDraw(): Boolean {
            media_zoom_image.viewTreeObserver.removeOnPreDrawListener(this)
            startPostponedEnterTransition()

            return true
        }
    })

这是第二个活动的布局：

1. 约束布局

这是动画：

<changeBounds
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200" />

这很简单，但我无法理解它。第二个图像最初有一些侦听器使用手势，我认为这就是原因，但注释所有内容仍然会滞后。第一个活动中的图像是另一个具有相同转换名称的共享元素转换的目标，这可能是问题所在吗？我做错了什么吗？是ConstraintLayout的问题吗？Glide有问题吗？

提前感谢您的帮助。

Answer 1

相反，使用PreDrawListener，将监听器与滑翔一起使用会解决它。看起来有一个时间问题

 Glide
            .with(this)
            .asBitmap()
            .load(url)
            .apply(RequestOptions().diskCacheStrategy(DiskCacheStrategy.RESOURCE))
            .listener(new RequestListener<Bitmap>() {
                @Override
                public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Bitmap> target, boolean isFirstResource) {
                    return false;
                }

                @Override
                public boolean onResourceReady(Bitmap resource, Object model, Target<Bitmap> target, DataSource dataSource, boolean isFirstResource) {
                    media_zoom_image.setImageBitmap(resource);
                    startPostponedEnterTransition();
                    return true;
                }
            })
            .into(media_zoom_image);

确保删除

 media_zoom_image.viewTreeObserver.addOnPreDrawListener(object : ViewTreeObserver.OnPreDrawListener {
    override fun onPreDraw(): Boolean {
        media_zoom_image.viewTreeObserver.removeOnPreDrawListener(this)
        startPostponedEnterTransition()

        return true
    }
})

更新

我已经更新了onResourceReady块。请试一试。

Glide
        .with(this)
        .asBitmap()
        .load(url)
        .apply(RequestOptions().diskCacheStrategy(DiskCacheStrategy.RESOURCE))
        .listener(new RequestListener<Bitmap>() {
            @Override
            public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Bitmap> target, boolean isFirstResource) {
                return false;
            }

            @Override
            public boolean onResourceReady(Bitmap resource, Object model, Target<Bitmap> target, DataSource dataSource, boolean isFirstResource) {
                startPostponedEnterTransition();
                return false;
            }
        })
        .into(media_zoom_image);

更新2

尽早呼叫延迟过渡。

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState);

postponeEnterTransition(); // Called it before set content. Try to call it before super.onCreate to see if it also works?

setContentView(R.layout.activity_zoom_image);
...
})

更新3

优化图像。有一些在线网站或工具，或者你可以问你的平面设计师。

此外，您还可以增加动画的持续时间，为平滑加载提供时间。

<changeBounds
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300" />

请注意，glide中的侦听器在将bitmap设置为view之前运行。毕加索和Glide的不同之处在于，毕加索在into（）方法中有一个可选的回调参数，该参数在将位图设置为view后运行onSuccess（）。因此，使我们共享转换的执行是断断续续的（ImageView#setBitmapImage），已经在延迟时运行了。在这种情况下，毕加索更为耀眼。