From 928151257fef4d0bc7bf7de2e89cf694c7f9829c Mon Sep 17 00:00:00 2001 From: Alexandre G Pereira Date: Sat, 13 Jul 2024 03:33:49 -0300 Subject: [PATCH] Change monster image detail image transition to alpha (#295) --- .../hunter/detail/ui/MonsterDetailScreen.kt | 9 ++++++ .../hunter/detail/ui/MonsterImages.kt | 30 ++++--------------- .../registration/ui/form/MonsterImageForm.kt | 8 +++-- 3 files changed, 20 insertions(+), 27 deletions(-) diff --git a/feature/monster-detail/compose/src/commonMain/kotlin/br/alexandregpereira/hunter/detail/ui/MonsterDetailScreen.kt b/feature/monster-detail/compose/src/commonMain/kotlin/br/alexandregpereira/hunter/detail/ui/MonsterDetailScreen.kt index 5fbb9fdb..e2e9d2eb 100644 --- a/feature/monster-detail/compose/src/commonMain/kotlin/br/alexandregpereira/hunter/detail/ui/MonsterDetailScreen.kt +++ b/feature/monster-detail/compose/src/commonMain/kotlin/br/alexandregpereira/hunter/detail/ui/MonsterDetailScreen.kt @@ -35,6 +35,7 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.LazyListState import androidx.compose.foundation.lazy.rememberLazyListState +import androidx.compose.foundation.pager.HorizontalPager import androidx.compose.foundation.pager.PagerState import androidx.compose.foundation.pager.rememberPagerState import androidx.compose.foundation.shape.RoundedCornerShape @@ -98,6 +99,7 @@ internal fun MonsterDetailScreen( onSpellClicked: (String) -> Unit = {}, onLoreClicked: (String) -> Unit = {} ) = Surface { + HorizontalPagerTransitionController(pagerState) MonsterImageCompose( monsters, @@ -188,6 +190,13 @@ internal fun MonsterDetailScreen( OnMonsterChanged(monsters, initialMonsterIndex, pagerState, onMonsterChanged) } +@Composable +private fun HorizontalPagerTransitionController(pagerState: PagerState) = HorizontalPager( + state = pagerState, +) { + Box(Modifier.fillMaxWidth()) +} + @Composable private fun ScrollableBackground( getScrollPositionOffset: () -> Int diff --git a/feature/monster-detail/compose/src/commonMain/kotlin/br/alexandregpereira/hunter/detail/ui/MonsterImages.kt b/feature/monster-detail/compose/src/commonMain/kotlin/br/alexandregpereira/hunter/detail/ui/MonsterImages.kt index da17285f..beeedb22 100644 --- a/feature/monster-detail/compose/src/commonMain/kotlin/br/alexandregpereira/hunter/detail/ui/MonsterImages.kt +++ b/feature/monster-detail/compose/src/commonMain/kotlin/br/alexandregpereira/hunter/detail/ui/MonsterImages.kt @@ -19,16 +19,14 @@ package br.alexandregpereira.hunter.detail.ui import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.pager.HorizontalPager import androidx.compose.foundation.pager.PagerState import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Shape import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp -import androidx.compose.ui.util.lerp import br.alexandregpereira.hunter.ui.compose.MonsterCoilImage -import kotlin.math.absoluteValue +import br.alexandregpereira.hunter.ui.transition.AlphaTransition data class ImageState(val url: String, val contentDescription: String) @@ -40,33 +38,15 @@ internal fun MonsterImages( height: Dp, shape: Shape, contentPadding: PaddingValues = PaddingValues(0.dp) -) = HorizontalPager( - state = pagerState -) { pagePosition -> - val image = images[pagePosition] +) = AlphaTransition( + dataList = images, + pagerState = pagerState +) { image -> MonsterCoilImage( imageUrl = image.url, contentDescription = image.contentDescription, height = height, shape = shape, - graphicsLayerBlock = { - val fraction = - 1f - pagerState.calculateCurrentOffsetForPage(pagePosition).absoluteValue.coerceIn(0f, 1f) - - lerp( - start = 0.4f, - stop = 1f, - fraction = fraction - ).also { scale -> - scaleX = scale - scaleY = scale - } - }, modifier = Modifier.padding(contentPadding) ) } - -@OptIn(ExperimentalFoundationApi::class) -private fun PagerState.calculateCurrentOffsetForPage(page: Int): Float { - return (this.currentPage - page) + this.currentPageOffsetFraction -} diff --git a/feature/monster-registration/compose/src/commonMain/kotlin/br/alexandregpereira/hunter/monster/registration/ui/form/MonsterImageForm.kt b/feature/monster-registration/compose/src/commonMain/kotlin/br/alexandregpereira/hunter/monster/registration/ui/form/MonsterImageForm.kt index 147a6688..d264a0c0 100644 --- a/feature/monster-registration/compose/src/commonMain/kotlin/br/alexandregpereira/hunter/monster/registration/ui/form/MonsterImageForm.kt +++ b/feature/monster-registration/compose/src/commonMain/kotlin/br/alexandregpereira/hunter/monster/registration/ui/form/MonsterImageForm.kt @@ -51,8 +51,12 @@ internal fun LazyListScope.MonsterImageForm( modifier = Modifier.fillMaxWidth(), contentAlignment = TopCenter ) { - val imageWidth by animateDpAsState(targetValue = if (infoState.isImageHorizontal) 360.dp else 270.dp) - val imageHeight by animateDpAsState(targetValue = if (infoState.isImageHorizontal) 270.dp else 360.dp) + val imageWidth by animateDpAsState( + targetValue = if (infoState.isImageHorizontal) 208.dp else 156.dp + ) + val imageHeight by animateDpAsState( + targetValue = if (infoState.isImageHorizontal) 156.dp else 208.dp + ) MonsterCoilImage( imageUrl = infoState.imageUrl, contentDescription = infoState.name,