🛠️ New HorizontalExpandingTransition
* Added new transition, which expands it's content from chosen direction
This commit is contained in:
parent
a772849df8
commit
4b166f71e7
2 changed files with 33 additions and 50 deletions
|
|
@ -1,11 +1,5 @@
|
||||||
package ua.acclorite.book_story.presentation.screens.reader.components.app_bar
|
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.background
|
||||||
import androidx.compose.foundation.layout.Arrangement
|
import androidx.compose.foundation.layout.Arrangement
|
||||||
import androidx.compose.foundation.layout.Box
|
import androidx.compose.foundation.layout.Box
|
||||||
|
|
@ -36,7 +30,6 @@ import androidx.compose.ui.draw.clip
|
||||||
import androidx.compose.ui.unit.dp
|
import androidx.compose.ui.unit.dp
|
||||||
import ua.acclorite.book_story.R
|
import ua.acclorite.book_story.R
|
||||||
import ua.acclorite.book_story.domain.util.Direction
|
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.CustomIconButton
|
||||||
import ua.acclorite.book_story.presentation.core.components.LocalHistoryViewModel
|
import ua.acclorite.book_story.presentation.core.components.LocalHistoryViewModel
|
||||||
import ua.acclorite.book_story.presentation.core.components.LocalLibraryViewModel
|
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.library.data.LibraryEvent
|
||||||
import ua.acclorite.book_story.presentation.screens.reader.data.ReaderEvent
|
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.Colors
|
||||||
|
import ua.acclorite.book_story.presentation.ui.HorizontalExpandingTransition
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Reader bottom bar.
|
* Reader bottom bar.
|
||||||
|
|
@ -102,7 +96,7 @@ fun ReaderBottomBar() {
|
||||||
modifier = Modifier.padding(top = 3.dp, bottom = 5.dp),
|
modifier = Modifier.padding(top = 3.dp, bottom = 5.dp),
|
||||||
verticalAlignment = Alignment.CenterVertically
|
verticalAlignment = Alignment.CenterVertically
|
||||||
) {
|
) {
|
||||||
HorizontalExpandingAnimation(
|
HorizontalExpandingTransition(
|
||||||
visible = arrowDirection == Direction.START,
|
visible = arrowDirection == Direction.START,
|
||||||
startDirection = true
|
startDirection = true
|
||||||
) {
|
) {
|
||||||
|
|
@ -133,7 +127,7 @@ fun ReaderBottomBar() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
HorizontalExpandingAnimation(
|
HorizontalExpandingTransition(
|
||||||
visible = arrowDirection == Direction.END,
|
visible = arrowDirection == Direction.END,
|
||||||
startDirection = false
|
startDirection = false
|
||||||
) {
|
) {
|
||||||
|
|
@ -216,44 +210,3 @@ 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()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -4,10 +4,12 @@ import androidx.compose.animation.core.AnimationSpec
|
||||||
import androidx.compose.animation.core.EaseInOut
|
import androidx.compose.animation.core.EaseInOut
|
||||||
import androidx.compose.animation.core.animateFloatAsState
|
import androidx.compose.animation.core.animateFloatAsState
|
||||||
import androidx.compose.animation.core.tween
|
import androidx.compose.animation.core.tween
|
||||||
|
import androidx.compose.animation.expandHorizontally
|
||||||
import androidx.compose.animation.expandVertically
|
import androidx.compose.animation.expandVertically
|
||||||
import androidx.compose.animation.fadeIn
|
import androidx.compose.animation.fadeIn
|
||||||
import androidx.compose.animation.fadeOut
|
import androidx.compose.animation.fadeOut
|
||||||
import androidx.compose.animation.scaleIn
|
import androidx.compose.animation.scaleIn
|
||||||
|
import androidx.compose.animation.shrinkHorizontally
|
||||||
import androidx.compose.animation.shrinkVertically
|
import androidx.compose.animation.shrinkVertically
|
||||||
import androidx.compose.animation.slideInHorizontally
|
import androidx.compose.animation.slideInHorizontally
|
||||||
import androidx.compose.animation.slideInVertically
|
import androidx.compose.animation.slideInVertically
|
||||||
|
|
@ -16,6 +18,8 @@ import androidx.compose.animation.slideOutVertically
|
||||||
import androidx.compose.foundation.layout.Box
|
import androidx.compose.foundation.layout.Box
|
||||||
import androidx.compose.runtime.Composable
|
import androidx.compose.runtime.Composable
|
||||||
import androidx.compose.runtime.getValue
|
import androidx.compose.runtime.getValue
|
||||||
|
import androidx.compose.runtime.remember
|
||||||
|
import androidx.compose.ui.Alignment
|
||||||
import androidx.compose.ui.Modifier
|
import androidx.compose.ui.Modifier
|
||||||
import androidx.compose.ui.draw.alpha
|
import androidx.compose.ui.draw.alpha
|
||||||
import androidx.compose.ui.platform.LocalDensity
|
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
|
@Composable
|
||||||
fun FadeTransitionPreservingSpace(
|
fun FadeTransitionPreservingSpace(
|
||||||
visible: Boolean,
|
visible: Boolean,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue