Smooth transition when changing image on SimpleDraweeView

[ziad-halabi9]

I have a SimpleDraweeView that is processing an image request through a controller:

Postprocessor redMeshPostprocessor = new BasePostprocessor() {
                @Override
                public String getName() {
                    return "redMeshPostprocessor";
                }

                @Override
                public CloseableReference<Bitmap> process(
                        Bitmap sourceBitmap,
                        PlatformBitmapFactory bitmapFactory) {
                    //custom processing on the bitmap and returning it

                }
            };

            ImageRequest request = ImageRequestBuilder.newBuilderWithSource(Uri.parse(coverImage))
                    .setPostprocessor(redMeshPostprocessor)
                    .build();

            PipelineDraweeController controller = (PipelineDraweeController)
                    Fresco.newDraweeControllerBuilder()
                            .setImageRequest(request)
                            .setOldController(iv_cover.getController())
                            // other setters as you need
                            .build();
            iv_cover.setController(controller);

Then later on, I want to change the image on the SimpleDraweeView by simply saying:
iv_cover.setImageURI(Uri.parse(url));

Problem is that when loading the second image, there's a split second where the SimpleDraweeView is showing the placeholder. How to avoid that? Want the transition between the 2 images to be gapless and smooth. Thanks!

[massimocarli]

Hi @ziad-halabi9,
Thanks for you post. At the moment every time we send a request we show the placeholder. This is the behavior of most the use case. Why would you need to keep the previous image when requesting the new onein a recycling logic?
Thanks

[ziad-halabi9]

@massimocarli Thank you for your response.
Say I have an image already cached and I want to request it but with bigger size to replace it. So what I do is I get the first cached bitmap, resize it, blur it and display it on SimpleDraweeView. In the meantime I request the image with bigger size, and when I receive it, I want to place it on the same SimpleDraweeView with a fade in animation.
So I want the transition between the 2 images to be gapless, hence without showing a placeholder.

[plamenko]

You should build your drawee controller with both lowResImageRequest and imageRequest set as explained here. Then Fresco will take care of loading the low res and automatically replacing it with high-res as soon as it is available.

[hemantskycap]

Hi @plamenko @massimocarli

I have almost same requirements as @ziad-halabi9

I want to create carousal view. In my carousal view, I want to hit next image request after 5 seconds. Until the request complete, I want to show my previous image. After response, show new image with fade-in animation and hide previous image with fade-out animation.

Please let me know if you have any idea, link or suggestion for this.

[oprisnik]

See #1328 and linked issues there.