Add a background alpha on scroll on the LandingScreen

This commit is contained in:
Andres Gomez, Thomas (ITDV RL) 2024-06-21 15:56:07 +02:00
parent 1040f54d23
commit 5a1cedf4ff
2 changed files with 25 additions and 6 deletions

View file

@ -84,7 +84,7 @@ fun AdventureDetailScreen(
}
@Stable
data class TitleLayoutInfo(
private data class TitleLayoutInfo(
val position: Float,
val height: Float,
)
@ -217,7 +217,7 @@ private fun AdventureDetailContent(
}
}
val TitleLayoutInfoSaver: Saver<TitleLayoutInfo?, Any> = run {
private val TitleLayoutInfoSaver: Saver<TitleLayoutInfo?, Any> = run {
val positionKey = "position"
val heightKey = "height"
mapSaver(

View file

@ -23,8 +23,10 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
@ -38,6 +40,7 @@ import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.TransformOrigin
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontStyle
@ -130,6 +133,7 @@ fun LandingScreen(
}
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun LandingContent(
modifier: Modifier = Modifier,
@ -146,26 +150,39 @@ private fun LandingContent(
encyclopedia: State<List<List<LandingItemUio>>>,
onFeature: (LandingItemUio) -> Unit,
) {
val density = LocalDensity.current
val verticalPadding = remember {
with(density) {
(paddings.calculateTopPadding() + paddings.calculateBottomPadding()).toPx()
}
}
Box(
modifier = modifier.verticalScroll(scrollState),
modifier = modifier,
) {
Box(
modifier = Modifier
.fillMaxWidth()
.aspectRatio(1f)
.graphicsLayer {
this.alpha = ((verticalPadding - scrollState.value) / verticalPadding).coerceIn(
minimumValue = 0f,
maximumValue = 1f,
)
}
.clip(RectangleShape),
) {
Image(
modifier = Modifier
.matchParentSize()
.scrollOffset(scrollState) { it / 2 },
.scrollOffset(scrollState) { -it / 3 },
painter = painterResource(id = R.drawable.im_naderius_background),
contentDescription = null,
)
Image(
modifier = Modifier
.matchParentSize()
.scrollOffset(scrollState) { it / 3 },
.scrollOffset(scrollState) { -it / 2 },
painter = painterResource(id = R.drawable.im_naderius_foreground),
contentDescription = null,
)
@ -173,7 +190,7 @@ private fun LandingContent(
modifier = Modifier
.matchParentSize()
.offset(y = (-16).dp)
.scrollOffset(scrollState) { it / 3 }
.scrollOffset(scrollState) { -it / 2 }
.magic(),
painter = painterResource(id = R.drawable.im_naderius_dice),
contentDescription = null,
@ -187,6 +204,8 @@ private fun LandingContent(
Column(
modifier = Modifier
.systemBarsPadding()
.verticalScroll(scrollState)
.fillMaxSize()
.padding(paddingValues = paddings),
verticalArrangement = Arrangement.spacedBy(8.dp),