🛠️ New HorizontalExpandingTransition

* Added new transition, which expands it's content from chosen direction
This commit is contained in:
Acclorite 2024-09-21 14:29:25 +03:00
parent a772849df8
commit 4b166f71e7
2 changed files with 33 additions and 50 deletions

View file

@ -1,11 +1,5 @@
package ua.acclorite.book_story.presentation.screens.reader.components.app_bar
import androidx.compose.animation.expandHorizontally
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.shrinkHorizontally
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
@ -36,7 +30,6 @@ import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp
import ua.acclorite.book_story.R
import ua.acclorite.book_story.domain.util.Direction
import ua.acclorite.book_story.presentation.core.components.CustomAnimatedVisibility
import ua.acclorite.book_story.presentation.core.components.CustomIconButton
import ua.acclorite.book_story.presentation.core.components.LocalHistoryViewModel
import ua.acclorite.book_story.presentation.core.components.LocalLibraryViewModel
@ -47,6 +40,7 @@ import ua.acclorite.book_story.presentation.screens.history.data.HistoryEvent
import ua.acclorite.book_story.presentation.screens.library.data.LibraryEvent
import ua.acclorite.book_story.presentation.screens.reader.data.ReaderEvent
import ua.acclorite.book_story.presentation.ui.Colors
import ua.acclorite.book_story.presentation.ui.HorizontalExpandingTransition
/**
* Reader bottom bar.
@ -102,7 +96,7 @@ fun ReaderBottomBar() {
modifier = Modifier.padding(top = 3.dp, bottom = 5.dp),
verticalAlignment = Alignment.CenterVertically
) {
HorizontalExpandingAnimation(
HorizontalExpandingTransition(
visible = arrowDirection == Direction.START,
startDirection = true
) {
@ -133,7 +127,7 @@ fun ReaderBottomBar() {
}
}
HorizontalExpandingAnimation(
HorizontalExpandingTransition(
visible = arrowDirection == Direction.END,
startDirection = false
) {
@ -215,45 +209,4 @@ private fun SliderIndicator(progress: Float) {
)
)
}
}
/**
* Horizontal Expanding Animation.
*/
@Composable
private fun HorizontalExpandingAnimation(
visible: Boolean,
startDirection: Boolean,
content: @Composable () -> Unit,
) {
val enterAnimation = remember(startDirection) {
when (startDirection) {
true -> {
expandHorizontally(expandFrom = Alignment.Start) + fadeIn() + slideInHorizontally { -it }
}
false -> {
expandHorizontally() + fadeIn() + slideInHorizontally { it }
}
}
}
val exitAnimation = remember(startDirection) {
when (startDirection) {
true -> {
shrinkHorizontally(shrinkTowards = Alignment.Start) + fadeOut() + slideOutHorizontally { -it }
}
false -> {
shrinkHorizontally() + fadeOut() + slideOutHorizontally { it }
}
}
}
CustomAnimatedVisibility(
visible = visible,
enter = enterAnimation,
exit = exitAnimation
) {
content()
}
}

View file

@ -4,10 +4,12 @@ import androidx.compose.animation.core.AnimationSpec
import androidx.compose.animation.core.EaseInOut
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.animation.expandHorizontally
import androidx.compose.animation.expandVertically
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleIn
import androidx.compose.animation.shrinkHorizontally
import androidx.compose.animation.shrinkVertically
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideInVertically
@ -16,6 +18,8 @@ import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.layout.Box
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.platform.LocalDensity
@ -97,6 +101,32 @@ fun ExpandingTransition(
)
}
@Composable
fun HorizontalExpandingTransition(
visible: Boolean,
startDirection: Boolean,
modifier: Modifier = Modifier,
content: @Composable () -> Unit,
) {
val enterAnimation = remember(startDirection) {
if (startDirection) expandHorizontally(expandFrom = Alignment.Start) + fadeIn() + slideInHorizontally { -it }
else expandHorizontally() + fadeIn() + slideInHorizontally { it }
}
val exitAnimation = remember(startDirection) {
if (startDirection) shrinkHorizontally(shrinkTowards = Alignment.Start) + fadeOut() + slideOutHorizontally { -it }
else shrinkHorizontally() + fadeOut() + slideOutHorizontally { it }
}
CustomAnimatedVisibility(
visible = visible,
modifier = modifier,
enter = enterAnimation,
exit = exitAnimation
) {
content()
}
}
@Composable
fun FadeTransitionPreservingSpace(
visible: Boolean,