Add crossfade between subsequent image results in AsyncImage by tak8997 · Pull Request #3141 · coil-kt/coil

tak8997 · 2025-08-23T07:27:52Z

Description

Currently, AsyncImage's crossfade only applies from placeholder → result.
When switching between different image models, the new image replaces the old one immediately ("jump cut") without a crossfade.
This PR introduces an optional parameter to support crossfading from the previous successful image result → the new result, skipping the placeholder.

Motivation

Addresses #2994.
Many developers expect true crossfade between subsequent requests (not only placeholder → result).

Notes

Default behavior remains unchanged to avoid breaking existing apps.
When enabled, fade duration now properly applies to subsequent requests.
Tested with multiple consecutive image requests to confirm smooth transition.

…n AsyncImagePainter

colinrtwhite · 2025-08-25T00:10:08Z


 internal const val DEFAULT_CROSSFADE_MILLIS = 200

+fun ImageRequest.Builder.crossfadeBetweenImages(enable: Boolean) = apply {


Can you add a short doc comment for this method?

Also we should add ImageLoader.Builder.crossfadeBetweenImages so this can be configured per-ImageLoader.

bed4934
3b6c58c
please check this commit

colinrtwhite · 2025-08-25T00:10:41Z

+    extras[crossfadeBetweenImagesKey] = enable
+}
+
+val ImageRequest.crossfadeBetweenImages: Boolean


Please annotate this and crossfadeBetweenImages with @ExperimentalCoilApi.

129111e
please check this commit

colinrtwhite · 2025-08-25T00:11:30Z

+val ImageRequest.crossfadeBetweenImages: Boolean
+    get() = getExtra(crossfadeBetweenImagesKey)
+
+private val crossfadeBetweenImagesKey = Extras.Key(default = false)


We should also add:

val Extras.Key.Companion.crossfadeBetweenImages: Extras.Key<Boolean> get() = crossfadeBetweenImagesKey

ba668de
please check this commit

colinrtwhite

Thanks for implementing this. I think this looks good for Compose, but do you know how we would also add support to Views?

Ideally, I'd like for this ImageRequest param to automatically support Views and Compose. Currently I could see someone using this param with an ImageView and being confused it doesn't work.

…in GenericViewTarget. Additionally, opt-in option is provided.

tak8997 · 2025-08-27T07:34:27Z

Thanks for implementing this. I think this looks good for Compose, but do you know how we would also add support to Views?

Ideally, I'd like for this ImageRequest param to automatically support Views and Compose. Currently I could see someone using this param with an ImageView and being confused it doesn't work.

340a445
please check this commit

colinrtwhite

Thanks for working on this. Thinking more about it - I think we should make this solution more generic. Currently we're coupling this behaviour to crossfade, but really we want the ability to use the existing image as the placeholder for the next image request. If we do that then both the view and Compose-based crossfade implementations should automatically crossfade from what the previous image is. It would also allow users to skip setting the placeholder if they want to go from first loaded image -> second loaded image without setting a placeholder and without a crossfade.

Unfortunately we don't have knowledge of what the existing image is with views, but we do with Compose/AsyncImagePainter. As such, I think it's OK to only support this functionality in Compose. Here's what we should do:

Revert the changes to Target to support views.
Rename the config option crossfadeBetweenImages to useExistingImageAsPlaceholder(enable: Boolean) (open to better names) and move it to an imageRequest.kt file in coil-compose-core (as it's only supported in Compose). We should note in the method description that this config option will only work in Compose.
Update AsyncImagePainter to use the existing painter in onStart if placeholder == null and useExistingImageAsPlaceholder is enabled on the ImageRequest.

Thanks again for working and iterating on this!

colinrtwhite · 2025-08-28T15:39:52Z

    /**
     * Called when the request starts.
     */
-    fun onStart(placeholder: Image?) {}


We can't make this change as it breaks binary compatibility.

I wanted to convert the existing view drawable into an image in RealImageLoader's onStart method when there is no placeholder, but unfortunately, there seems to be no way to do it.🥲
Anyway, I have reverted the changes on the 'View' side.

please check this!
97c734b
f47f8f8
48658df

@colinrtwhite Could you please take a look?🙂

…rawable in GenericViewTarget. Additionally, opt-in option is provided." This reverts commit 340a445.

This reverts commit e887971.

* Rename `crossfadeBetweenImages` to `useExistingImageAsPlaceholder` for clarity * Move from `coil-core` to `coil-compose-core` to restrict to Compose usage only * Update documentation to explicitly state Compose-only support * Remove from core module to prevent incorrect usage in XML views

This reverts commit e17c262.

colinrtwhite

Thanks for implementing this!

byungtak-lee and others added 4 commits August 23, 2025 13:00

Enable crossfade between images by remembering last success painter i…

79d5c15

…n AsyncImagePainter

Add opt-in option for crossfade between images

300314a

Update API dump

039affd

Simplify if-condition

401f965

injae-kim mentioned this pull request Aug 23, 2025

Crossfade does not actually crossfade #2994

Closed

colinrtwhite reviewed Aug 25, 2025

View reviewed changes

byungtak-lee added 2 commits August 26, 2025 16:23

Enable crossfade between images by remembering last success drawable …

340a445

…in GenericViewTarget. Additionally, opt-in option is provided.

Use crossfadeBetweenImages from target instead of ImageRequest

e887971

tak8997 force-pushed the crossfade_improvement branch from f2a7820 to e887971 Compare August 26, 2025 07:55

byungtak-lee added 4 commits August 26, 2025 16:56

Annotate crossfadeBetweenImages APIs as @ExperimentalCoilApi

129111e

Expose crossfadeBetweenImages key

ba668de

Enable crossfadeBetweenImages option on ImageLoader.Builder

bed4934

Add documentation comment explaining crossfadeBetweenImages option

3b6c58c

tak8997 force-pushed the crossfade_improvement branch from 7780b60 to 3b6c58c Compare August 27, 2025 04:56

byungtak-lee added 2 commits August 27, 2025 16:30

Fix failing tests after adding crossfadeBetweenImages option

e17c262

Update API dump

33832dc

tak8997 closed this Aug 27, 2025

tak8997 reopened this Aug 27, 2025

tak8997 requested a review from colinrtwhite August 28, 2025 01:54

colinrtwhite reviewed Aug 28, 2025

View reviewed changes

tak8997 added 6 commits August 30, 2025 14:09

Revert "Enable crossfade between images by remembering last success d…

97c734b

…rawable in GenericViewTarget. Additionally, opt-in option is provided." This reverts commit 340a445.

Revert "Use crossfadeBetweenImages from target instead of ImageRequest"

f47f8f8

This reverts commit e887971.

Apply Spotless code formatting

a3f1216

Revert "Fix failing tests after adding crossfadeBetweenImages option"

04bcd5c

This reverts commit e17c262.

Update API dump

3ab0ee8

tak8997 requested a review from colinrtwhite September 2, 2025 07:24

colinrtwhite approved these changes Sep 4, 2025

View reviewed changes

colinrtwhite merged commit 252a4b9 into coil-kt:main Sep 4, 2025
10 checks passed

tak8997 deleted the crossfade_improvement branch September 5, 2025 03:18


		internal const val DEFAULT_CROSSFADE_MILLIS = 200

		fun ImageRequest.Builder.crossfadeBetweenImages(enable: Boolean) = apply {

Conversation

tak8997 commented Aug 23, 2025

Description

Motivation

Notes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tak8997 Aug 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

colinrtwhite left a comment

Choose a reason for hiding this comment

Uh oh!

tak8997 commented Aug 27, 2025

Uh oh!

colinrtwhite left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

colinrtwhite left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

tak8997 Aug 27, 2025 •

edited

Loading