Lucien Guimaraes
02/25/2021, 5:52 PMThiago
02/25/2021, 7:05 PMLucien Guimaraes
02/25/2021, 7:10 PMDoris Liu
02/25/2021, 7:17 PMLucien Guimaraes
02/25/2021, 7:22 PMBoxWithConstraints {
val scrollState = rememberScrollState()
val maxHeight = remember {
mutableStateOf(this@BoxWithConstraints.maxHeight.value / 3) //We consider the image header is a third of the screen
}
val tobAppBarBackgroundColor = animateColorAsState(
when (scrollState.value) {
0f -> {
Color.White.copy(alpha = 0f)
}
in 0f..maxHeight.value -> {
val alpha = scrollState.value/maxHeight.value
Color.White.copy(alpha = alpha)
}
else -> {
Color.White.copy(alpha = 1f)
}
}
)
Column(modifier = Modifier
.fillMaxSize()
.verticalScroll(scrollState)) {
//content
}
TopAppBar(
backgroundColor = tobAppBarBackgroundColor.value,
)
}
Doris Liu
02/25/2021, 7:30 PMwhen (scrollState.value) {
0f -> {
Color.White.copy(alpha = 0f)
}
in 0f..maxHeight.value -> {
val alpha = scrollState.value/maxHeight.value
Color.White.copy(alpha = alpha)
}
else -> {
Color.White.copy(alpha = 1f)
}
}
Can you add a log after this block and do a quick scroll?Lucien Guimaraes
02/25/2021, 7:35 PMD/debug: scrollState is 0.0
D/debug: scrollState is 0.0
D/debug: scrollState is 16.316895
D/debug: scrollState is 76.4624
D/debug: scrollState is 480.82385
D/debug: scrollState is 674.97656
D/debug: scrollState is 674.97656
D/debug: scrollState is 674.97656
D/debug: scrollState is 702.93726
D/debug: scrollState is 758.1581
D/debug: scrollState is 866.1438
D/debug: scrollState is 978.0
Colton Idle
02/25/2021, 7:37 PMDoris Liu
02/25/2021, 7:42 PManimateColorAsState
and just use the interpolated alpha directly. what do you see there? Could you also include the timestamp for the scrollState.value logging so we can see whether there's any frame skipping?Lucien Guimaraes
02/25/2021, 7:46 PMOut of curiosity, what if you removeWow just tried this and it's already much betterand just use the interpolated alpha directly. what do you see there?animateColorAsState
Doris Liu
02/25/2021, 7:48 PMLucien Guimaraes
02/25/2021, 7:50 PMDoes it happen every frame ?Yes, it seems so. Here is the logging without
animateColorAsState
2021-02-25 19:49:19.449 D/debug: scrollState is 0.0
2021-02-25 19:49:19.715 D/debug: scrollState is 0.0
2021-02-25 19:49:22.178 D/debug: scrollState is 8.751709
2021-02-25 19:49:22.225 D/debug: scrollState is 36.629395
2021-02-25 19:49:22.278 D/debug: scrollState is 66.92615
2021-02-25 19:49:22.291 D/debug: scrollState is 68.18396
2021-02-25 19:49:22.302 D/debug: scrollState is 76.79932
2021-02-25 19:49:22.343 D/debug: scrollState is 93.759766
2021-02-25 19:49:22.402 D/debug: scrollState is 126.45117
2021-02-25 19:49:22.422 D/debug: scrollState is 134.1903
2021-02-25 19:49:22.439 D/debug: scrollState is 140.88184
2021-02-25 19:49:22.492 D/debug: scrollState is 157.72766
2021-02-25 19:49:22.538 D/debug: scrollState is 168.83215
2021-02-25 19:49:22.553 D/debug: scrollState is 177.0935
2021-02-25 19:49:22.613 D/debug: scrollState is 209.2351
2021-02-25 19:49:22.632 D/debug: scrollState is 215.45056
2021-02-25 19:49:22.651 D/debug: scrollState is 227.0415
2021-02-25 19:49:22.750 D/debug: scrollState is 271.698
2021-02-25 19:49:22.768 D/debug: scrollState is 274.1543
2021-02-25 19:49:22.814 D/debug: scrollState is 297.47107
2021-02-25 19:49:22.865 D/debug: scrollState is 319.48877
2021-02-25 19:49:22.924 D/debug: scrollState is 339.22827
2021-02-25 19:49:22.939 D/debug: scrollState is 348.00037
2021-02-25 19:49:23.001 D/debug: scrollState is 372.81177
2021-02-25 19:49:23.047 D/debug: scrollState is 384.83008
2021-02-25 19:49:23.092 D/debug: scrollState is 400.29297
2021-02-25 19:49:23.171 D/debug: scrollState is 419.08154
2021-02-25 19:49:23.224 D/debug: scrollState is 429.19495
2021-02-25 19:49:23.284 D/debug: scrollState is 447.0946
2021-02-25 19:49:23.336 D/debug: scrollState is 465.09326
2021-02-25 19:49:23.379 D/debug: scrollState is 476.05554
2021-02-25 19:49:23.391 D/debug: scrollState is 481.49835
2021-02-25 19:49:23.455 D/debug: scrollState is 489.9375
2021-02-25 19:49:23.511 D/debug: scrollState is 494.52356
2021-02-25 19:49:23.557 D/debug: scrollState is 508.80078
2021-02-25 19:49:23.567 D/debug: scrollState is 513.7958
2021-02-25 19:49:23.612 D/debug: scrollState is 524.1341
2021-02-25 19:49:23.637 D/debug: scrollState is 534.9395
2021-02-25 19:49:23.697 D/debug: scrollState is 553.46844
2021-02-25 19:49:23.754 D/debug: scrollState is 579.5058
2021-02-25 19:49:23.782 D/debug: scrollState is 590.0153
2021-02-25 19:49:23.795 D/debug: scrollState is 596.7677
2021-02-25 19:49:23.818 D/debug: scrollState is 605.4359
2021-02-25 19:49:23.836 D/debug: scrollState is 613.4224
2021-02-25 19:49:23.891 D/debug: scrollState is 630.97266
2021-02-25 19:49:23.955 D/debug: scrollState is 659.7693
2021-02-25 19:49:23.974 D/debug: scrollState is 666.88965
2021-02-25 19:49:23.988 D/debug: scrollState is 672.5115
2021-02-25 19:49:24.003 D/debug: scrollState is 679.4973
2021-02-25 19:49:24.073 D/debug: scrollState is 705.7602
2021-02-25 19:49:24.128 D/debug: scrollState is 726.7422
2021-02-25 19:49:24.214 D/debug: scrollState is 755.17145
2021-02-25 19:49:24.278 D/debug: scrollState is 775.1311
2021-02-25 19:49:24.347 D/debug: scrollState is 802.93066
2021-02-25 19:49:24.400 D/debug: scrollState is 818.94055
2021-02-25 19:49:24.460 D/debug: scrollState is 829.8714
2021-02-25 19:49:24.521 D/debug: scrollState is 845.0254
2021-02-25 19:49:24.541 D/debug: scrollState is 852.99146
2021-02-25 19:49:24.594 D/debug: scrollState is 870.84784
2021-02-25 19:49:24.641 D/debug: scrollState is 892.7049
2021-02-25 19:49:24.686 D/debug: scrollState is 917.4961
2021-02-25 19:49:24.774 D/debug: scrollState is 959.5512
2021-02-25 19:49:24.831 D/debug: scrollState is 978.0
Doris Liu
02/25/2021, 7:54 PMLucien Guimaraes
02/25/2021, 7:55 PMDoris Liu
02/25/2021, 7:59 PMLucien Guimaraes
02/25/2021, 8:03 PManimateColorAsState
, I haven't try without it on my device yet)Doris Liu
02/25/2021, 8:11 PManimateColorAsState
to have an impact on frame rate since it's fairly lightweight, if it does on beta01 please file a bug. I'd be curious to see what's going on. 🙂Thiago
02/25/2021, 8:15 PMwithNanoFrames
you think that should solve frame drops? As the TargetBasedAnimation
sample on official docs: https://developer.android.com/jetpack/compose/animation#targetbasedanimationLucien Guimaraes
02/25/2021, 8:19 PManimateColorAsState
it's the same issue as it was in alpha12. Both were tested on emulatorDoris Liu
02/25/2021, 8:26 PMDoris, just a doubt, migrating this Lucien sample to use animation withI doubt that would fix the frame drop. If you scroll up to the diagram here: https://developer.android.com/jetpack/compose/animation#low-level-apis , you'll see thatyou think that should solve frame drops?withNanoFrames
animate*AsState
uses TargetBasedAnimation
under the hood. 🙂migration done on beta01, I still have some value changes that are 50-100ms apart while using the interpolated alpha directly. And usingPlease file a bug and include the snippet. We'll investigate. Thank youit's the same issue as it was in alpha12. Both were tested on emulatoranimateColorAsState
Lucien Guimaraes
02/25/2021, 8:34 PMTimo Drick
02/26/2021, 12:40 AMDoris Liu
02/26/2021, 12:47 AMspring
over a tween
, at least spring
keeps the velocity continuous. 🙂Timo Drick
03/02/2021, 12:53 AMDoris Liu
03/02/2021, 1:09 AMfirstVisibleItemScrollOffset
in combination w/ animate*AsState
?Timo Drick
03/02/2021, 8:17 AMLucien Guimaraes
03/02/2021, 1:27 PMColton Idle
03/02/2021, 2:11 PMLucien Guimaraes
03/02/2021, 2:48 PM@Composable
fun topAppBarBackgroundColor(
scrollState: ScrollState,
pictureHeight: Dp,
): Color {
val topBarAnimationLimit = (scrollState.maxValue / HikeDetailScreen.HEADER_PART_SCREEN) + pictureHeight.value
return when (scrollState.value) {
0 -> {
MaterialTheme.colors.surface.copy(alpha = 0f)
}
in 0..topBarAnimationLimit.roundToInt() -> {
var alpha = scrollState.value / topBarAnimationLimit
if (alpha > 1) //to be sure we never have an alpha float exceeding 1f
alpha = 1f
MaterialTheme.colors.surface.copy(alpha = alpha)
}
else -> {
MaterialTheme.colors.surface.copy(alpha = 1f)
}
}
}
the HEADER_PART_SCREEN
is just an Int ratio of the screen. In this case I want my picture to take a third of the bloc visible, so it's 3. But it could be whatever you want.
And for the statusBar I just created a Box that take a modifier with the statusBarHeight (using Inset library) and with a background being the same as the topBarThiago
03/02/2021, 6:27 PMtopAppBarBackgroundColor
is annotaded with @Composable if that contains logic only?
I think your code can be improved to:
@Composable
fun topAppBarBackgroundColor(
scrollState: ScrollState,
pictureHeight: Dp,
): Color {
val topBarAnimationLimit = (scrollState.maxValue / HikeDetailScreen.HEADER_PART_SCREEN) + pictureHeight.value
val alpha = (scrollState.value / topBarAnimationLimit).coercIn(0f, 1f)
return MaterialTheme.colors.surface.copy(alpha = alpha)
}
Lucien Guimaraes
03/03/2021, 9:12 AMI have one question: why youris annotaded with @Composable if that contains logic onlytopAppBarBackgroundColor
MaterialTheme.colors.surface
has to be called from a Composable so that's why!
And yeah it can totally be improved to be cleaner 👍 from your example you can even just return the alpha, and you apply the MaterialTheme.colors.surface
where the function is called. Which remove the Compose annotation from topAppBarBackgroundColor