我正试图在一个屏幕上的2 ImageViews
转到下一个屏幕时实现共享元素转换。其中一个图像在两个屏幕上都具有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());
}
使用Glide
使用以下代码从网络加载图片:
Glide.with(mActivity).load(articleCoverData.mImageUrl).skipMemoryCache(true).diskCacheStrategy(DiskCacheStrategy.SOURCE).dontTransform().into(holder.coverImage);
在接收方,图像按如下方式加载:
Glide.with(mContext).load(mData.mImageUrl).skipMemoryCache(true).diskCacheStrategy(DiskCacheStrategy.SOURCE).into(mCoverImageView);
以我定义的风格:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Add this line -->
<item name="android:windowContentTransitions">true</item>
<!-- This is the color of the Status bar -->
<item name="colorPrimaryDark">@color/transparent</item>
<!-- specify shared element transitions -->
<item name="android:windowSharedElementEnterTransition">
@transition/change_image_transform</item>
<item name="android:windowSharedElementExitTransition">
@transition/change_image_transform</item>
</style>
change_image_transform
时:
<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<changeImageTransform/>
</transitionSet>
修改:尝试将转换更改为:
<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<changeBounds/>
<changeTransform/>
<changeImageTransform/>
</transitionSet>
或
<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<changeBounds/>
<changeImageTransform/>
</transitionSet>
但结果是一样的。
问题是:我在这里遗漏了什么,我还需要做些什么才能让这段经历变得窒息吗?或者这是Android的错误?
答案 0 :(得分:3)
最后,设法解决了这个问题。使用以下代码和配置实现了所需的结果:
private static void startAnimatedTransitionIntent(Activity context, View view, ArticleCoverData articleCoverData) {
Intent intent = new Intent(context, ReaderActivity.class);
intent.putExtra(Constants.ARTICLE_DATA, articleCoverData);
View coverStartView = view.findViewById(R.id.coverImage);
View coverDiagonalDecoratorStartView = view.findViewById(R.id.diagonal_image_decorator);
Window window = context.getWindow();
View decor = window.getDecorView();
View navigationBarStartView = decor.findViewById(android.R.id.navigationBarBackground);
List<Pair<View, String>> pairs = new ArrayList<>();
pairs.add(Pair.create(coverStartView, context.getString(R.string.transition_timeline_cover_image_to_reader_name)));
pairs.add(Pair.create(coverDiagonalDecoratorStartView, context.getString(R.string.transition_timeline_cover_image_diagonal_decorator_to_reader_name)));
if (navigationBarStartView != null) {
pairs.add(Pair.create(navigationBarStartView, Window.NAVIGATION_BAR_BACKGROUND_TRANSITION_NAME));
}
ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(context, pairs.toArray(new Pair[pairs.size()]));
ActivityCompat.startActivity(context, intent, options.toBundle());
}
我使用 Picasso 和以下代码将图片加载到图片视图中:
Picasso.with(mActivity).load(articleCoverData.mImageUrl).into(articleVH.coverImage);
在接收方,我以相同的方式应用图像:
Picasso.with(mContext).load(mData.mImageUrl).into(mCoverImageView);
风格:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:statusBarColor">@color/app_red</item>
<item name="android:windowContentTransitions">true</item>
<!-- This is the color of the Status bar -->
<item name="colorPrimaryDark">@color/transparent</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<!--<item name="android:windowEnterTransition">@transition/cheeses_enter</item>-->
<!--<item name="android:windowExitTransition">@transition/cheeses_exit</item>-->
<item name="android:windowSharedElementEnterTransition">@transition/cheeses_enter</item>
<item name="android:windowSharedElementExitTransition">@transition/cheeses_exit</item>
</style>
两个转换:cheeses_enter
和cheeses_exit
都是:
<?xml version="1.0" encoding="utf-8"?>
<transitionSet>
<changeBounds />
<changeTransform />
<changeClipBounds />
<changeImageTransform />
</transitionSet>
重要的是使用ImageView scaleType参数应用缩放类型,而不是使用 Picasso 裁剪或 Glide 裁剪。
因为如果你这样做,裁剪和非裁剪动作将作为过渡的一部分。
答案 1 :(得分:1)
只是为任何碰到这个问题的人提供答案(以及更多解释)。
首先,只需使用<changeBounds/>
和scaletype
即可完成转换。
问题主要在于 Glide 如何随时处理imageview / drawable测量。有一些延迟,因此没有创建过渡动画。
Picasso 根据def blog_detail():
post = Post.objects.get(request_post)
try:
Next_Post_id = (post.id + 1)
Next_Post = Post.objects.get(id=Next_Post_id)
Next_Post = Next_Post.id
except ObjectDoesNotExist:
Next_Post = None
# Previous Post
try:
Previous_Post_id = (post.id - 1)
Previous_Post = Post.objects.get(id=Previous_Post_id)
Previous_Post = Previous_Post.id
except ObjectDoesNotExist:
Previous_Post = None
context = {'post': post, 'Next_Post': Next_Post, 'Previous_Post': Previous_Post}
return render(request, "BlogHome/pages/post.html", context)
提供足够快的图像位置(矩阵)值,并且转换工作正常。
答案 2 :(得分:1)
我遇到了同样的问题,我已在dontAnimate() + dontTransform()
加载请求中使用Glide
。
对我来说,我的解决方案是删除:
clipToPadding="false"
clipChildren="false"
来自我的ImageView容器ViewGroup。
在共享元素转换期间使用scaleType="centerCrop"
时,这些属性会使我的图片无法剪切。
答案 3 :(得分:0)
在您的change_image_transform.xml中,更改为此
<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<changeImageTransform/>
<changeBounds/>
</transitionSet>