WIP: Add animation for the next article

app/src/main/java/me/ash/reader/ui/page/home/HomeViewModel.kt

@@ -99,5 +99,4 @@ data class FilterState(
 data class HomeUiState(
     val pagingData: Flow<PagingData<ArticleFlowItem>> = emptyFlow(),
     val searchContent: String = "",
-    var nextArticleId: String = ""
 )

app/src/main/java/me/ash/reader/ui/page/home/reading/ReadingPage.kt

@@ -1,6 +1,9 @@
 package me.ash.reader.ui.page.home.reading
 
 import android.util.Log
+import androidx.compose.animation.*
+import androidx.compose.animation.core.Spring
+import androidx.compose.animation.core.spring
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
@@ -17,6 +20,7 @@ import me.ash.reader.ui.ext.collectAsStateValue
 import me.ash.reader.ui.ext.isScrollDown
 import me.ash.reader.ui.page.home.HomeViewModel
 
+@OptIn(ExperimentalAnimationApi::class)
 @Composable
 fun ReadingPage(
     navController: NavHostController,
@@ -33,7 +37,7 @@ fun ReadingPage(
     }
 
     val pagingItems = homeUiState.pagingData.collectAsLazyPagingItems().itemSnapshotList
-    readingViewModel.recorderNextArticle(readingUiState, homeUiState, pagingItems)
+    readingViewModel.recorderNextArticle(pagingItems)
 
     LaunchedEffect(Unit) {
         navController.currentBackStackEntryFlow.collect {
@@ -72,8 +76,24 @@ fun ReadingPage(
 
                 // Content
                 if (readingUiState.articleWithFeed != null) {
+                    AnimatedContent(
+                        targetState = readingUiState.content ?: "",
+                        transitionSpec = {
+                            slideInVertically(
+                                spring(
+                                    dampingRatio = Spring.DampingRatioNoBouncy,
+                                    stiffness = Spring.StiffnessLow,
+                                )
+                            ) { height -> height / 2 } with slideOutVertically { height -> -(height / 2) } + fadeOut(
+                                spring(
+                                    dampingRatio = Spring.DampingRatioNoBouncy,
+                                    stiffness = Spring.StiffnessLow,
+                                )
+                            )
+                        }
+                    ) { target ->
                         Content(
-                        content = readingUiState.content ?: "",
+                            content = target,
                             feedName = readingUiState.articleWithFeed.feed.name,
                             title = readingUiState.articleWithFeed.article.title,
                             author = readingUiState.articleWithFeed.article.author,
@@ -84,6 +104,7 @@ fun ReadingPage(
                             isShowToolBar = isShowToolBar,
                         )
                     }
+                }
                 // Bottom Bar
                 if (readingUiState.articleWithFeed != null) {
                     BottomBar(
@@ -98,7 +119,9 @@ fun ReadingPage(
                             readingViewModel.markStarred(it)
                         },
                         onNextArticle = {
-                            readingViewModel.nextArticle(navController, homeUiState.nextArticleId)
+                            if (readingUiState.nextArticleId.isNotEmpty()) {
+                                readingViewModel.initData(readingUiState.nextArticleId)
+                            }
                         },
                         onFullContent = {
                             if (it) readingViewModel.renderFullContent()

app/src/main/java/me/ash/reader/ui/page/home/reading/ReadingViewModel.kt

@@ -4,7 +4,6 @@ import android.util.Log
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
-import androidx.navigation.NavController
 import androidx.paging.ItemSnapshotList
 import dagger.hilt.android.lifecycle.HiltViewModel
 import kotlinx.coroutines.Dispatchers
@@ -17,8 +16,6 @@ import me.ash.reader.data.model.article.ArticleFlowItem
 import me.ash.reader.data.model.article.ArticleWithFeed
 import me.ash.reader.data.repository.RssHelper
 import me.ash.reader.data.repository.RssRepository
-import me.ash.reader.ui.page.common.RouteName
-import me.ash.reader.ui.page.home.HomeUiState
 import javax.inject.Inject
 
 @HiltViewModel
@@ -119,13 +116,6 @@ class ReadingViewModel @Inject constructor(
         }
     }
 
-    fun nextArticle(navController: NavController, nextArticleId: String) {
-        navController.popBackStack()
-        if (nextArticleId.isNotBlank()) {
-            navController.navigate("${RouteName.READING}/${nextArticleId}")
-        }
-    }
-
     private fun showLoading() {
         _readingUiState.update {
             it.copy(isLoading = true)
@@ -138,12 +128,9 @@ class ReadingViewModel @Inject constructor(
         }
     }
 
-    fun recorderNextArticle(
+    fun recorderNextArticle(pagingItems: ItemSnapshotList<ArticleFlowItem>) {
-        readingUiState: ReadingUiState, homeUiState: HomeUiState, pagingItems:
-        ItemSnapshotList<ArticleFlowItem>
-    ) {
         if (pagingItems.size > 0) {
-            val cur = readingUiState.articleWithFeed?.article
+            val cur = _readingUiState.value.articleWithFeed?.article
             if (cur != null) {
                 var found = false
                 for (item in pagingItems) {
@@ -151,9 +138,13 @@ class ReadingViewModel @Inject constructor(
                         val itemId = item.articleWithFeed.article.id
                         if (itemId == cur.id) {
                             found = true
-                            homeUiState.nextArticleId = ""
+                            _readingUiState.update {
+                                it.copy(nextArticleId = "")
+                            }
                         } else if (found) {
-                            homeUiState.nextArticleId = itemId
+                            _readingUiState.update {
+                                it.copy(nextArticleId = itemId)
+                            }
                             break
                         }
                     }
@@ -169,4 +160,5 @@ data class ReadingUiState(
     val isFullContent: Boolean = false,
     val isLoading: Boolean = true,
     val listState: LazyListState = LazyListState(),
+    val nextArticleId: String = "",
 )