共享元素过渡和 Fresco 无法正常工作
Shared Element Transition and Fresco not working properly
我有两个活动,都包含一个图像。我正在使用 Fresco 在一个 activity 中加载图像,并使用 Picasso 在另一个 activity 中加载图像。以下是我的代码的相关部分:
第一张图片activity
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/imageView102"
android:transitionName="image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="9dp"
android:layout_marginRight="9dp"
android:layout_marginTop="10dp"
fresco:actualImageScaleType="centerCrop"
fresco:placeholderImage="@color/wait_color"
fresco:placeholderImageScaleType="fitCenter"
fresco:viewAspectRatio="1.33"
android:layout_marginBottom="10dp" />
秒图像activity
<uk.co.senab.photoview.PhotoView
android:id="@+id/zoomable"
android:transitionName="image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true" />
我正在使用 PhotoView in second activity 来放大和缩小图像。
第一个Activity
Uri uri = Uri.parse(photoUrl);
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
.setProgressiveRenderingEnabled(true)
.build();
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setImageRequest(request)
.setOldController(image.getController())
.build();
image.setController(controller);
image.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(ImageActivity.this, AlternateFullImageActivity.class);
intent.putExtra("ID", photoId);
intent.putExtra("photoUrl", photoUrl);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
ActivityOptionsCompat options = ActivityOptionsCompat.
makeSceneTransitionAnimation(ImageActivity.this, (View)image, "image");
startActivity(intent, options.toBundle());
}
else {
startActivity(intent);
}
}
});
第二个Activity
Intent intent = getIntent();
photoId = intent.getExtras().getString("ID");
photoUrl = intent.getExtras().getString("photoUrl");
Picasso.with(AlternateFullImageActivity.this)
.load(photoUrl)
.into(image);
mAttacher = new PhotoViewAttacher(image);
问题是,过渡并不顺利而且非常快。我读到 here 我需要将过渡更改为 ChangeBounds
。如何将过渡更改为该过渡以及如何为该过渡添加持续时间,比如 1000 毫秒?
您可以创建一个 class 来扩展 TransitionSet 以指定您的转换,例如 ChangeBounds。例如...
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public class DetailTransition extends TransitionSet {
public DetailsTransition(int duration, int delay) {
setOrdering(ORDERING_TOGETHER);
addTransition(new ChangeBounds()).
addTransition(new ChangeTransform()).
addTransition(new ChangeImageTransform()).setDuration(duration).setStartDelay(delay).setInterpolator(new AnticipateOvershootInterpolator());
}
}
然后将共享元素转换设置到您的片段或 activity / window。对于这样的片段
currentFragment.setSharedElementEnterTransition(new DetailsTransition(1000, 400));
或 activity 像这样
getWindow().setSharedElementEnterTransition(new DetailsTransition(1000, 400));
在新版本的 Fresco 中,有一个自定义过渡可以轻松完成。
在他们自己的存储库中查看此示例:
https://github.com/facebook/fresco/tree/master/samples/transition
基本上,您必须调用 setSharedElementEnterTransition()
并在 opening activity 上使用相应的转换 activity :
getWindow().setSharedElementEnterTransition(DraweeTransition.createTransitionSet(ScalingUtils.ScaleType.CENTER_CROP,ScalingUtils.ScaleType.FIT_CENTER));
getWindow().setSharedElementReturnTransition(DraweeTransition.createTransitionSet(ScalingUtils.ScaleType.FIT_CENTER,ScalingUtils.ScaleType.CENTER_CROP));
Finally I found a solution, By following 3 steps.
1.在您的项目中添加以下 class:
import com.facebook.drawee.generic.GenericDraweeHierarchy;
import com.facebook.drawee.view.SimpleDraweeView;
import android.content.Context;
import android.graphics.Matrix;
import android.util.AttributeSet;
public class TranslateDraweeView extends SimpleDraweeView {
public TranslateDraweeView(Context context) {
super(context);
}
public TranslateDraweeView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public TranslateDraweeView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public TranslateDraweeView(Context context, GenericDraweeHierarchy hierarchy) {
super(context, hierarchy);
}
public void animateTransform(Matrix matrix) {
invalidate();
}
}
2。将 XML 布局文件中的 SimpleDraweeView 替换为 TranslateDraweeView
3。在您的电话中添加代码 activity:
Intent i = new Intent(FirstActivity.this, SecActivity.class);
String transitionName = "Detail Transition";
ActivityOptions transitionActivityOptions;
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
//******* THIS IS MORE IMPORTANT *******************
setExitSharedElementCallback(new SharedElementCallback() {
@Override
public void onSharedElementEnd(List<String> sharedElementNames,
List<View> sharedElements,
List<View> sharedElementSnapshots) {
super.onSharedElementEnd(sharedElementNames, sharedElements,
sharedElementSnapshots);
for (View view : sharedElements) {
if (view instanceof SimpleDraweeView) {
view.setVisibility(View.VISIBLE);
}
}
}
});
//***********************************************
transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(this,
image, transitionName);
startActivity(i, transitionActivityOptions.toBundle());
}
祝您编码愉快...!
我有两个活动,都包含一个图像。我正在使用 Fresco 在一个 activity 中加载图像,并使用 Picasso 在另一个 activity 中加载图像。以下是我的代码的相关部分:
第一张图片activity
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/imageView102"
android:transitionName="image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="9dp"
android:layout_marginRight="9dp"
android:layout_marginTop="10dp"
fresco:actualImageScaleType="centerCrop"
fresco:placeholderImage="@color/wait_color"
fresco:placeholderImageScaleType="fitCenter"
fresco:viewAspectRatio="1.33"
android:layout_marginBottom="10dp" />
秒图像activity
<uk.co.senab.photoview.PhotoView
android:id="@+id/zoomable"
android:transitionName="image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true" />
我正在使用 PhotoView in second activity 来放大和缩小图像。
第一个Activity
Uri uri = Uri.parse(photoUrl);
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
.setProgressiveRenderingEnabled(true)
.build();
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setImageRequest(request)
.setOldController(image.getController())
.build();
image.setController(controller);
image.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(ImageActivity.this, AlternateFullImageActivity.class);
intent.putExtra("ID", photoId);
intent.putExtra("photoUrl", photoUrl);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
ActivityOptionsCompat options = ActivityOptionsCompat.
makeSceneTransitionAnimation(ImageActivity.this, (View)image, "image");
startActivity(intent, options.toBundle());
}
else {
startActivity(intent);
}
}
});
第二个Activity
Intent intent = getIntent();
photoId = intent.getExtras().getString("ID");
photoUrl = intent.getExtras().getString("photoUrl");
Picasso.with(AlternateFullImageActivity.this)
.load(photoUrl)
.into(image);
mAttacher = new PhotoViewAttacher(image);
问题是,过渡并不顺利而且非常快。我读到 here 我需要将过渡更改为 ChangeBounds
。如何将过渡更改为该过渡以及如何为该过渡添加持续时间,比如 1000 毫秒?
您可以创建一个 class 来扩展 TransitionSet 以指定您的转换,例如 ChangeBounds。例如...
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public class DetailTransition extends TransitionSet {
public DetailsTransition(int duration, int delay) {
setOrdering(ORDERING_TOGETHER);
addTransition(new ChangeBounds()).
addTransition(new ChangeTransform()).
addTransition(new ChangeImageTransform()).setDuration(duration).setStartDelay(delay).setInterpolator(new AnticipateOvershootInterpolator());
}
}
然后将共享元素转换设置到您的片段或 activity / window。对于这样的片段
currentFragment.setSharedElementEnterTransition(new DetailsTransition(1000, 400));
或 activity 像这样
getWindow().setSharedElementEnterTransition(new DetailsTransition(1000, 400));
在新版本的 Fresco 中,有一个自定义过渡可以轻松完成。
在他们自己的存储库中查看此示例:
https://github.com/facebook/fresco/tree/master/samples/transition
基本上,您必须调用 setSharedElementEnterTransition()
并在 opening activity 上使用相应的转换 activity :
getWindow().setSharedElementEnterTransition(DraweeTransition.createTransitionSet(ScalingUtils.ScaleType.CENTER_CROP,ScalingUtils.ScaleType.FIT_CENTER));
getWindow().setSharedElementReturnTransition(DraweeTransition.createTransitionSet(ScalingUtils.ScaleType.FIT_CENTER,ScalingUtils.ScaleType.CENTER_CROP));
Finally I found a solution, By following 3 steps.
1.在您的项目中添加以下 class:
import com.facebook.drawee.generic.GenericDraweeHierarchy;
import com.facebook.drawee.view.SimpleDraweeView;
import android.content.Context;
import android.graphics.Matrix;
import android.util.AttributeSet;
public class TranslateDraweeView extends SimpleDraweeView {
public TranslateDraweeView(Context context) {
super(context);
}
public TranslateDraweeView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public TranslateDraweeView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public TranslateDraweeView(Context context, GenericDraweeHierarchy hierarchy) {
super(context, hierarchy);
}
public void animateTransform(Matrix matrix) {
invalidate();
}
}
2。将 XML 布局文件中的 SimpleDraweeView 替换为 TranslateDraweeView
3。在您的电话中添加代码 activity:
Intent i = new Intent(FirstActivity.this, SecActivity.class);
String transitionName = "Detail Transition";
ActivityOptions transitionActivityOptions;
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
//******* THIS IS MORE IMPORTANT *******************
setExitSharedElementCallback(new SharedElementCallback() {
@Override
public void onSharedElementEnd(List<String> sharedElementNames,
List<View> sharedElements,
List<View> sharedElementSnapshots) {
super.onSharedElementEnd(sharedElementNames, sharedElements,
sharedElementSnapshots);
for (View view : sharedElements) {
if (view instanceof SimpleDraweeView) {
view.setVisibility(View.VISIBLE);
}
}
}
});
//***********************************************
transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(this,
image, transitionName);
startActivity(i, transitionActivityOptions.toBundle());
}
祝您编码愉快...!