我正在尝试实现共享元素转换,当ImageViews一个屏幕上的2 转到下一个屏幕时.其中一个图像centerCrop在两个屏幕上都有scaleType .我面临的问题是,当转换开始时,图像将在其动画到下一个屏幕之前进入原始大小(裁剪之前).当它到达下一个屏幕时,它以原始大小到达它,然后它被裁剪到目标图像视图.
整个体验并不顺畅,真正让人眼前一亮.我使用的代码是:
public void animateIntent(View view, ArticleCoverData articleCoverData) {
Intent intent = new Intent(mActivity, ReaderActivity.class);
intent.putExtra(Constants.ARTICLE_DATA, articleCoverData);
// The view animation will start from
View coverStartView = view.findViewById(R.id.coverImage);
View coverDiagonalDecoratorStartView = view.findViewById(R.id.diagonal_image_decorator);
Pair<View, String> pair1 = Pair.create(coverStartView, mActivity.getString(R.string.transition_timeline_cover_image_to_reader_name));
Pair<View, String> pair2 = Pair.create(coverDiagonalDecoratorStartView, mActivity.getString(R.string.transition_timeline_cover_image_diagonal_decorator_to_reader_name));
ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(mActivity, pair1, pair2);
ActivityCompat.startActivity(mActivity, intent, options.toBundle());
}
Run Code Online (Sandbox Code Playgroud)
使用Glide以下代码从Web加载图像:
Glide.with(mActivity).load(articleCoverData.mImageUrl).skipMemoryCache(true).diskCacheStrategy(DiskCacheStrategy.SOURCE).dontTransform().into(holder.coverImage);
Run Code Online (Sandbox Code Playgroud)
在接收方,图像加载如下:
Glide.with(mContext).load(mData.mImageUrl).skipMemoryCache(true).diskCacheStrategy(DiskCacheStrategy.SOURCE).into(mCoverImageView);
Run Code Online (Sandbox Code Playgroud)
在我定义的样式中:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Add this line -->
<item name="android:windowContentTransitions">true</item>
<!-- This is …Run Code Online (Sandbox Code Playgroud) android crop android-transitions shared-element-transition android-glide
请注意,这个问题与此处找到的问题非常相似。没有解决方案,所以我想我应该提供一些代码并再次询问。
本质上,我试图在两个片段之间进行 ImageView 的共享元素转换。我的最终目标是制作一个看起来与默认图片库非常相似的动画。重要的一点是我使用 Glide 来加载图像。我遇到的问题是我无法让scaleType 平滑地进行动画处理(从centerCrop 到fitCenter)。
我有一个包含 RecyclerView 的片段,其每个项目都包含一个 ImageView。这些 ImageView 是缩略图,XML 如下所示:
<ImageView
android:id="@+id/ivPhoto"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="@dimen/large_spacing"
android:scaleType="centerCrop"/>
Run Code Online (Sandbox Code Playgroud)
重要/有问题的部分是scaleType="centerCrop"
我使用以下命令设置转换名称并在 RecyclerView 适配器中加载图像:
holder.ivPhoto.setTransitionName(current.getPhotoFilepath());
Glide.with(holder.ivPhoto.getContext())
.load(current.getPhotoFilepath())
.dontTransform()
.into(holder.ivPhoto);
Run Code Online (Sandbox Code Playgroud)
单击某个项目时,将运行以下代码:
@Override
public void onItemClicked(AssetDetail assetDetail, ImageView imageView) {
if (assetDetail.getPhotoFilepath() != null) {
AssetDetailFragmentDirections.ActionAssetDetailFragmentToDisplayImageFragment action = AssetDetailFragmentDirections.actionAssetDetailFragmentToDisplayImageFragment(assetDetail.getPhotoFilepath());
FragmentNavigator.Extras extras = new FragmentNavigator.Extras.Builder()
.addSharedElement(imageView, assetDetail.getPhotoFilepath())
.build();
NavHostFragment.findNavController(this).navigate(action, extras);
}
}
Run Code Online (Sandbox Code Playgroud)
这将带您到第二个片段,它基本上只包含以下 ImageView(技术上是 PhotoView,我也尝试过使用普通 ImageView):
<com.github.chrisbanes.photoview.PhotoView
android:id="@+id/ivImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:scaleType="fitCenter" />
Run Code Online (Sandbox Code Playgroud)
我推迟输入转换并设置我想要使用的转换:
@Override …Run Code Online (Sandbox Code Playgroud)