添加滑动动画

zhujiang521 · Feb 22, 2022 · 6c92658 · 6c92658
1 parent c3c3dd4
commit 6c92658
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/banner/build.gradle b/banner/build.gradle
@@ -67,6 +67,7 @@ android {
 
 dependencies {
     implementation "androidx.compose.material:material:$compose_version"
+    implementation "androidx.compose.ui:ui-util:$compose_version"
 
     def accompanist_coil_version = "0.15.0"
     def accompanist_version = "0.24.2-alpha"

diff --git a/banner/src/main/java/com/zj/banner/BannerPager.kt b/banner/src/main/java/com/zj/banner/BannerPager.kt
@@ -9,14 +9,17 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.util.lerp
 import coil.annotation.ExperimentalCoilApi
 import com.google.accompanist.pager.*
 import com.zj.banner.model.BaseBannerBean
 import com.zj.banner.ui.BannerCard
 import com.zj.banner.ui.config.BannerConfig
 import kotlinx.coroutines.launch
 import java.util.*
+import kotlin.math.absoluteValue
 
 private const val TAG = "BannerPager"
 
@@ -56,6 +59,29 @@ fun <T : BaseBannerBean> BannerPager(
             BannerCard(
                 bean = item,
                 modifier = Modifier
+                    .graphicsLayer {
+                        // Calculate the absolute offset for the current page from the
+                        // scroll position. We use the absolute value which allows us to mirror
+                        // any effects for both directions
+                        val pageOffset = calculateCurrentOffsetForPage(page).absoluteValue
+
+                        // We animate the scaleX + scaleY, between 85% and 100%
+                        lerp(
+                            start = 0.85f,
+                            stop = 1f,
+                            fraction = 1f - pageOffset.coerceIn(0f, 1f)
+                        ).also { scale ->
+                            scaleX = scale
+                            scaleY = scale
+                        }
+
+                        // We animate the alpha, between 50% and 100%
+                        alpha = lerp(
+                            start = 0.5f,
+                            stop = 1f,
+                            fraction = 1f - pageOffset.coerceIn(0f, 1f)
+                        )
+                    }
                     .fillMaxSize()
                     .padding(config.bannerImagePadding),
                 shape = config.shape,