相关疑难解决方法(0)

具有scaleType centerCrop转换的共享元素是跳跃的

我正在尝试实现共享元素转换,当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

11
推荐指数
1
解决办法
2940
查看次数

Android - ImageView 的不同scaleType 之间的共享元素转换无法正确动画(使用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)

animation android shared-element-transition android-glide

5
推荐指数
1
解决办法
1218
查看次数