Improve player cover transition

This commit is contained in:
vfsfitvnm 2022-09-05 15:24:48 +02:00
parent cb3bc17a29
commit 5a55a662a8
2 changed files with 32 additions and 10 deletions

View file

@ -250,7 +250,6 @@ fun PlayerView(
contentAlignment = Alignment.Center,
modifier = Modifier
.weight(0.66f)
.padding(horizontal = 16.dp)
.padding(bottom = 16.dp)
) {
Thumbnail(
@ -259,6 +258,8 @@ fun PlayerView(
isShowingStatsForNerds = isShowingStatsForNerds,
onShowStatsForNerds = { isShowingStatsForNerds = it },
nestedScrollConnectionProvider = layoutState::nestedScrollConnection,
modifier = Modifier
.padding(horizontal = 16.dp)
)
}
@ -292,7 +293,6 @@ fun PlayerView(
contentAlignment = Alignment.Center,
modifier = Modifier
.weight(1.25f)
.padding(horizontal = 32.dp, vertical = 8.dp)
) {
Thumbnail(
isShowingLyrics = isShowingLyrics,
@ -300,6 +300,8 @@ fun PlayerView(
isShowingStatsForNerds = isShowingStatsForNerds,
onShowStatsForNerds = { isShowingStatsForNerds = it },
nestedScrollConnectionProvider = layoutState::nestedScrollConnection,
modifier = Modifier
.padding(horizontal = 32.dp, vertical = 8.dp)
)
}

View file

@ -2,11 +2,14 @@ package it.vfsfitvnm.vimusic.ui.views.player
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.AnimatedContentScope
import androidx.compose.animation.ContentTransform
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.SizeTransform
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.with
import androidx.compose.animation.scaleIn
import androidx.compose.animation.scaleOut
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.aspectRatio
@ -61,24 +64,41 @@ fun Thumbnail(
AnimatedContent(
targetState = mediaItemIndex,
transitionSpec = {
val duration = 500
val slideDirection =
if (targetState > initialState) AnimatedContentScope.SlideDirection.Left else AnimatedContentScope.SlideDirection.Right
(slideIntoContainer(slideDirection) + fadeIn() with
slideOutOfContainer(slideDirection) + fadeOut()).using(
SizeTransform(clip = false)
ContentTransform(
targetContentEnter = slideIntoContainer(
towards = slideDirection,
animationSpec = tween(duration)
) + fadeIn(
animationSpec = tween(duration)
) + scaleIn(
initialScale = 0.85f,
animationSpec = tween(duration)
),
initialContentExit = slideOutOfContainer(
towards = slideDirection,
animationSpec = tween(duration)
) + fadeOut(
animationSpec = tween(duration)
) + scaleOut(
targetScale = 0.85f,
animationSpec = tween(duration)
),
sizeTransform = SizeTransform(clip = false)
)
},
contentAlignment = Alignment.Center,
modifier = modifier
.aspectRatio(1f)
contentAlignment = Alignment.Center
) { currentMediaItemIndex ->
val mediaItem = remember(currentMediaItemIndex) {
player.getMediaItemAt(currentMediaItemIndex)
}
Box(
modifier = Modifier
modifier = modifier
.aspectRatio(1f)
.clip(ThumbnailRoundness.shape)
.size(thumbnailSizeDp)
) {