Has anyone tried to use `animateColorAsState` to t...
# composec
Chris Johnson
07/07/2021, 4:11 PMHas anyone tried to use
animateColorAsStateChris Johnson
07/07/2021, 4:14 PM Copy code
Modifier.pulsateHighlightColor(initialColor: Color): Modifier = composed {
val highlightColor = blue_12_percent
val currentTargetColor = remember { mutableStateOf(initialColor) }
DisposableEffect(Unit) {
currentTargetColor.value = highlightColor
onDispose { }
}
val animatedColor = animateColorAsState(
targetValue = currentTargetColor.value,
animationSpec = tween(durationMillis = 750),
finishedListener = {
currentTargetColor.value = if (currentTargetColor.value == highlightColor) {
initialColor
} else {
highlightColor
}
}
)
return@composed Modifier.background(animatedColor.value)
}d
Doris Liu
07/07/2021, 7:02 PMCould you log the A, R, G, B channel changes explicitly during the animation between two colors with different alphas?
c
Chris Johnson
07/07/2021, 9:05 PMSure.
Color(1.0, 1.0, 1.0, 1.0, sRGB IEC61966-2.1)Color(0.17254902, 0.5647059, 0.92941177, 0.12156863, sRGB IEC61966-2.1)Color(0.17254902, 0.5647059, 0.92941177, 0.12156863, sRGB IEC61966-2.1)Color(0.17254902, 0.5647059, 0.92941177, 0.12156863, sRGB IEC61966-2.1)Color(0.17254902, 0.5647059, 0.92941177, 0.12156863, sRGB IEC61966-2.1)Color(0.17254902, 0.5647059, 0.92941177, 0.12156863, sRGB IEC61966-2.1)Color(1.0, 1.0, 1.0, 1.0, sRGB IEC61966-2.1)Color(1.0, 1.0, 1.0, 1.0, sRGB IEC61966-2.1)Color(1.0, 1.0, 1.0, 1.0, sRGB IEC61966-2.1)Color(0.17254902, 0.5647059, 0.92941177, 0.12156863, sRGB IEC61966-2.1)Color(0.17254902, 0.5647059, 0.92941177, 0.12156863, sRGB IEC61966-2.1)Color(0.17254902, 0.5647059, 0.92941177, 0.12156863, sRGB IEC61966-2.1)Color(0.17254902, 0.5647059, 0.92941177, 0.12156863, sRGB IEC61966-2.1)Chris Johnson
07/07/2021, 9:07 PMAlthough I'm just logging my mutableStateOf<Color> on recomposition. Not sure if that's what you were looking for
d
Doris Liu
07/07/2021, 9:08 PMIt may be helpful to also log when the animation starts, and the initial/target value. The timestamp would be useful as well.
Doris Liu
07/07/2021, 9:08 PMI'm curious about
animatedColor.valuec
Chris Johnson
07/07/2021, 9:13 PMYeah it looks like
animatedColor.valueChris Johnson
07/07/2021, 9:13 PMthe alpha goes from 1 to 12% (the blue) then back down to 12%(blue) instead of 1.
Chris Johnson
07/07/2021, 9:18 PMThe initialColor is
Copy code
Color(0xFFFFFFFF) Copy code
Color(0x1f2c90ed)d
Doris Liu
07/07/2021, 9:28 PMI'm seeing the alpha going from 1f to 0.12ish. Then there seems to be a change in target, as all the ARGB values start changing towards Color(1f, 1f, 1f, 1f)
Doris Liu
07/07/2021, 9:33 PMJust to double check, the intended behavior for the code snippet above is to have the color animating back and forth repeatedly between the initial color and target color?
c
Chris Johnson
07/07/2021, 9:39 PMYep! I'm trying to get a video of it working (when using 2 colors with the same alpha) vs not working (different alphas)
d
Doris Liu
07/07/2021, 9:41 PMI tried to reproduce this locally. What I'm seeing is that during the interpolation, the blue seems to get darker than 12% as it animates towards fully white. Is that the bug you are referring to?
Doris Liu
07/07/2021, 9:42 PMOr is it something else? 🙂
c
Chris Johnson
07/07/2021, 9:44 PMHere's my examples
Chris Johnson
07/07/2021, 9:45 PMIt seems like the alpha isn't fully interpolated out when going to another color without alpha
d
Doris Liu
07/07/2021, 9:51 PMIn the "notworking" video, I do see the color arriving at (fully opaquely) white. However the blue gets darker than the initial 12% during the animation, which may appear as though it's going the opposite direction than expected. But that's really just the result of animating the alpha value from 0.12 to 1f.
c
Chris Johnson
07/07/2021, 9:53 PMohhhhh that's interesting.. that makes sense, thanks! I wonder if that's a timing issue then? Where the alpha value getting animated differs from the changing of the color RGB values
Chris Johnson
07/07/2021, 9:57 PMDo you have a suggested way of dealing with cases like this? My quick approach was to make sure their alpha values were the same but that's very flimsy.
d
Doris Liu
07/07/2021, 9:57 PMYea, the alpha is animating independently of the RGB values. My recommendation would be to compositing the translucent blue over the background as the target color. Something like this:
Copy code
Color(0x1f2c90ed).compositeOver(Color(0xffffffff))💯 1
c
Chris Johnson
07/07/2021, 9:58 PMWow. I was looking for a way to use Porter-Duff and you just unlocked it for me : D
Thank you so much!
👍 1
d
Doris Liu
07/07/2021, 10:02 PMBTW, it'd be easier/cleaner to use either
rememberInfiniteTransitionAnimatableanimateFooAsStatec
Chris Johnson
07/07/2021, 10:33 PMOh yes definitely. I had experimented with that and it's definitely cleaner and easier : - )
Thank you for all your work on this and on the samples. They helped me create some cool list animations
d
Doris Liu
07/07/2021, 10:47 PMGlad to hear that! 😀
210 Views