Change monster image detail image transition to alpha (#295)

alexandregpereira · Jul 13, 2024 · 9281512 · 9281512
1 parent 1234fbe
commit 9281512
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 27 deletions.
diff --git a/...ompose/src/commonMain/kotlin/br/alexandregpereira/hunter/detail/ui/MonsterDetailScreen.kt b/...ompose/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/...tail/compose/src/commonMain/kotlin/br/alexandregpereira/hunter/detail/ui/MonsterImages.kt b/...tail/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/...nMain/kotlin/br/alexandregpereira/hunter/monster/registration/ui/form/MonsterImageForm.kt b/...nMain/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,