IssueTracker

Component used: Animation Version used: 1.0.0

My use case:

I'm writing a composable for video playback. The player itself is expensive and loads async. While it's loading, it doesn't render anything, so I want to show a thumbnail preview over it. When the video loads, I'd like for the thumbnail to fade out. However, when the video player becomes inactive/unfocused, I want the thumbnail to appear instantly rather than fade back in.

Here's a rough structure of how I'd like to set this up:

// play: Boolean
Box {
  var videoLoaded by remember { mutableStateOf(false) }
  VideoPlayer(
    onLoaded = { videoLoaded = true }
  )
  val showThumbnail = play && videoLoaded
  val thumbnailAlpha = animateFloatAsState(
    if (showThumbnail) 1f else 0f,
    animationSpec = if (showThumbnail) snap() else tween()
  )
  Thumbnail(Modifier.alpha(thumbnailAlpha))
}

I like how my desired behavior is expressed in this part:

val thumbnailAlpha = animateFloatAsState(
  if (showThumbnail) 1f else 0f,
  animationSpec = if (showThumbnail) snap() else tween()
)

However, I can't actually use this, because despite using snap(), there's what seems to be a one-frame delay when changing showThumbnail from false to true. For a split second, I can see the underlying (blank) video composable behind the thumbnail.

I can work around this by short-circuiting the showThumbnail condition:

val thumbnailAlpha = animateFloatAsState(
  if (showThumbnail) 1f else 0f,
  animationSpec = if (showThumbnail) snap() else tween()
)
val realThumbnailAlpha = if (showThumbnail) 1f else thumbnailAlpha

This works, but it's uglier in my opinion. I'd love to be able to write it the first way.

Sample project attached.