SharedElementTransition无法使用Glide正确设置图像比例动画

Question

bounty过期在9小时内。该问题的答案有资格获得+ 50声望赏金。cpgreen2希望引起更多关注对此问题：

仅寻找此问题的答案即可解决问题

我正在执行从具有RecyclerView的片段到细节视图的共享元素过渡，在细节视图中两者之间共享图像。过渡效果很好，但是由于两张图片的大小不同，因此当我单击一张图片时，它会将图片缩放到最终大小，然后对ImageView边界进行动画处理。这导致图像在动画过程中与边界的大小不匹配。

Here is a video of what I'm describing

DetailFragment：

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

        sharedElementEnterTransition = TransitionInflater.from(context).inflateTransition(android.R.transition.move)
        ViewCompat.setTransitionName(binding.podcastImage, "podcastImage_${args.podcastId}")

        postponeEnterTransition()
    }

// called from onStart
private fun observeViewModel() {
        viewModel.podcastObservable.observe(this, Observer { podcast ->
            Glide.with(requireContext())
                .load(podcast.image)
                .into(binding.podcastImage)

            // other stuff

            startPostponedEnterTransition()
        })
    }

GridFragment：

fun navigateToPodcastDetailFragment(podcastId: String) {
        val args = Bundle()
        args.putString("podcast_id", podcastId)

        val directions = TopPodcastsFragmentDirections.viewPodcastDetails(podcastId)
        val extras = FragmentNavigatorExtras(
            podcast_image to "podcastImage_$podcastId"
        )

        Navigation.findNavController(requireActivity(), R.id.nav_host_fragment)
            .navigate(directions, extras)
    }

GridAdapter：

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        getItem(position).let { podcast ->
            with(holder) {
                Glide.with(holder.itemView.context)
                    .load(podcastList[position].image)
                    .dontAnimate()
                    .dontTransform()
                    .into(binding.thumbnail)
                bind(createOnClickListener(binding, podcast.id), podcast)
            }
        }
    }

ViewHolder.bind() {
    // other stuff
    ViewCompat.setTransitionName(binding.thumbnail, "podcast${value.id}")
} 

网格项ImageView：

<ImageView
            android:id="@+id/thumbnail"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:transitionName="@string/podcastImageTransition"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:src="@drawable/ic_launcher_background" />

DetailFragment ImageView：

<ImageView
            android:id="@+id/podcast_image"
            android:layout_width="164dp"
            android:layout_height="164dp"
            android:scaleType="centerCrop"
            android:layout_marginTop="24dp"
            android:transitionName="@string/podcastImageTransition"
            app:layout_constraintTop_toBottomOf="@id/toolbar"
            app:layout_constraintStart_toStartOf="parent"
            tools:src="@drawable/ic_launcher_background"/>

我想我的过渡部分大部分都是正确的，但是在过渡期间，关于图像的裁剪或缩放方式有些不正确。

提前感谢。

Answer 1

确保在DetailFragment中在Glide中包含.dontTransform（）

// called from onStart
private fun observeViewModel() {
        viewModel.podcastObservable.observe(this, Observer { podcast ->
            Glide.with(requireContext())
                .load(podcast.image)
                .dontTransform()
                .into(binding.podcastImage)

            // other stuff

            startPostponedEnterTransition()
        })
    }