修复共享元素动画首帧为上一个书籍封面的问题

app/src/main/java/io/legado/app/ui/widget/components/image/cover/CoilBookCover.kt

@@ -7,8 +7,10 @@ import android.text.StaticLayout
 import android.text.TextPaint
 import android.text.TextUtils
 import androidx.compose.animation.AnimatedVisibilityScope
+import androidx.compose.animation.EnterExitState
 import androidx.compose.animation.ExperimentalSharedTransitionApi
 import androidx.compose.animation.SharedTransitionScope
+import androidx.compose.animation.core.animateFloat
 import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.background
 import androidx.compose.foundation.isSystemInDarkTheme
@@ -25,6 +27,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.key
+import androidx.compose.runtime.mutableStateMapOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
@@ -47,6 +50,9 @@ import io.legado.app.ui.theme.LegadoTheme
 import org.koin.compose.koinInject
 import io.legado.app.model.BookCover as BookCoverModel
 
+private const val SharedCoverRadiusCacheMaxSize = 256
+private val sharedCoverRadiusCache = mutableStateMapOf<String, Dp>()
+
 @OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
 fun CoilBookCover(
@@ -81,6 +87,14 @@ fun CoilBookCover(
         mutableStateOf(sharedCoverKey != null && finalPath != null)
     }
 
+    val transitionRadius = rememberSharedCoverTransitionRadius(
+        sharedCoverKey = sharedCoverKey,
+        radius = radius,
+        animatedVisibilityScope = animatedVisibilityScope
+    )
+    val shape = remember(transitionRadius) { RoundedCornerShape(transitionRadius) }
+
+    key(path, sharedCoverKey) {
         Box(
             modifier = modifier
                 .aspectRatio(5f / 7f)
@@ -90,26 +104,26 @@ fun CoilBookCover(
                             Modifier.sharedElement(
                                 sharedContentState = rememberSharedContentState(sharedCoverKey),
                                 animatedVisibilityScope = animatedVisibilityScope,
-                            renderInOverlayDuringTransition = true
+                                clipInOverlayDuringTransition = OverlayClip(shape)
                             )
                         } else Modifier
                     }
                 )
                 .then(
                     if (CoverConfig.coverShowShadow) {
-                    Modifier.shadow(4.dp, RoundedCornerShape(radius))
+                        Modifier.shadow(4.dp, shape)
                     } else Modifier
                 )
                 .background(
                     if (!hasCustomDefault && !isOnlineCoverLoaded) {
                         LegadoTheme.colorScheme.surfaceContainerLow
                     } else Color.Transparent,
-                RoundedCornerShape(radius)
+                    shape
                 )
-            .clip(RoundedCornerShape(radius))
+                .clip(shape)
         ) {
+            Box(modifier = Modifier.fillMaxSize()) {
                 if (hasCustomDefault && !isOnlineCoverLoaded) {
-            key(randomPath) {
                     AsyncImage(
                         model = buildCoverImageRequest(
                             context = context,
@@ -124,13 +138,10 @@ fun CoilBookCover(
                         contentScale = ContentScale.Crop,
                         modifier = Modifier
                             .fillMaxSize()
-                        .clip(RoundedCornerShape(radius))
                     )
                 }
-        }
 
                 if (finalPath != null) {
-            key(finalPath) {
                     AsyncImage(
                         model = buildCoverImageRequest(
                             context = context,
@@ -143,9 +154,7 @@ fun CoilBookCover(
                         contentDescription = null,
                         imageLoader = koinInject(),
                         contentScale = ContentScale.Crop,
-                    modifier = Modifier
+                        modifier = Modifier.fillMaxSize(),
-                        .fillMaxSize()
-                        .clip(RoundedCornerShape(4.dp)),
                         onSuccess = {
                             isOnlineCoverLoaded = true
                             onLoadFinish?.invoke()
@@ -155,12 +164,12 @@ fun CoilBookCover(
                             onLoadFinish?.invoke()
                         }
                     )
-            }
                 } else {
                     LaunchedEffect(Unit) {
                         onLoadFinish?.invoke()
                     }
                 }
+            }
 
             if (showLoadingPlaceholder && !isOnlineCoverLoaded) {
                 if (!hasCustomDefault) {
@@ -181,6 +190,48 @@ fun CoilBookCover(
             }
         }
     }
+}
+
+@OptIn(ExperimentalSharedTransitionApi::class)
+@Composable
+private fun rememberSharedCoverTransitionRadius(
+    sharedCoverKey: String?,
+    radius: Dp,
+    animatedVisibilityScope: AnimatedVisibilityScope?
+): Dp {
+    if (sharedCoverKey == null || animatedVisibilityScope == null) {
+        return radius
+    }
+
+    val transition = animatedVisibilityScope.transition
+    val startRadius = sharedCoverRadiusCache[sharedCoverKey] ?: radius
+    val animatedRadiusValue by transition.animateFloat(
+        label = "book-cover-corner-radius"
+    ) { state ->
+        if (state == EnterExitState.Visible) radius.value else startRadius.value
+    }
+
+    LaunchedEffect(
+        sharedCoverKey,
+        radius,
+        transition.currentState,
+        transition.targetState
+    ) {
+        if (
+            transition.currentState == EnterExitState.Visible &&
+            transition.targetState == EnterExitState.Visible
+        ) {
+            sharedCoverRadiusCache[sharedCoverKey] = radius
+            if (sharedCoverRadiusCache.size > SharedCoverRadiusCacheMaxSize) {
+                sharedCoverRadiusCache.keys
+                    .firstOrNull { it != sharedCoverKey }
+                    ?.let(sharedCoverRadiusCache::remove)
+            }
+        }
+    }
+
+    return animatedRadiusValue.dp
+}
 
 @Composable
 private fun CoverTextOverlay(