WIP: Add animation for the next article

This commit is contained in:
Ash 2022-08-08 21:25:55 +08:00
parent beffe317e2
commit e427baf80a
3 changed files with 45 additions and 31 deletions

View File

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

View File

@ -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,17 +76,34 @@ fun ReadingPage(
// Content
if (readingUiState.articleWithFeed != null) {
Content(
content = readingUiState.content ?: "",
feedName = readingUiState.articleWithFeed.feed.name,
title = readingUiState.articleWithFeed.article.title,
author = readingUiState.articleWithFeed.article.author,
link = readingUiState.articleWithFeed.article.link,
publishedDate = readingUiState.articleWithFeed.article.date,
isLoading = readingUiState.isLoading,
listState = readingUiState.listState,
isShowToolBar = isShowToolBar,
)
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 = target,
feedName = readingUiState.articleWithFeed.feed.name,
title = readingUiState.articleWithFeed.article.title,
author = readingUiState.articleWithFeed.article.author,
link = readingUiState.articleWithFeed.article.link,
publishedDate = readingUiState.articleWithFeed.article.date,
isLoading = readingUiState.isLoading,
listState = readingUiState.listState,
isShowToolBar = isShowToolBar,
)
}
}
// Bottom Bar
if (readingUiState.articleWithFeed != null) {
@ -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()

View File

@ -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(
readingUiState: ReadingUiState, homeUiState: HomeUiState, pagingItems:
ItemSnapshotList<ArticleFlowItem>
) {
fun recorderNextArticle(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 = "",
)