Skip to content

Commit

Permalink
Consolidated animations
Browse files Browse the repository at this point in the history
  • Loading branch information
@imashnake0
imashnake0 committed Nov 17, 2024
1 parent ac2808f commit fd39620
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 87 deletions.
126 changes: 66 additions & 60 deletions app/src/main/java/com/imashnake/animite/features/home/HomeScreen.kt
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,15 @@
package com.imashnake.animite.features.home

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.AnimatedVisibilityScope
import androidx.compose.animation.ExperimentalSharedTransitionApi
import androidx.compose.animation.SharedTransitionScope
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.animation.expandVertically
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.shrinkVertically
import androidx.compose.animation.togetherWith
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
Expand Down Expand Up @@ -172,30 +169,47 @@ fun HomeScreen(
content = {
rows.fastForEach { row ->
row.data?.let {
HomeRow(
list = it.list,
type = it.type,
onItemClicked = { media ->
onNavigateToMediaItem(
MediaPage(
id = media.id,
source = it.type.name,
mediaType = homeMediaType.value.rawValue,
AnimatedContent(
targetState = it,
transitionSpec = {
fadeIn(tween(750))
.togetherWith(fadeOut(tween(750)))
},
label = "animate_home_row"
) { mediaList ->
if (mediaList.list.isNotEmpty())
HomeRow(
list = mediaList.list,
type = mediaList.type,
onItemClicked = { media ->
onNavigateToMediaItem(
MediaPage(
id = media.id,
source = mediaList.type.name,
mediaType = homeMediaType.value.rawValue,
)
)
},
sharedTransitionScope = sharedTransitionScope,
animatedVisibilityScope = animatedVisibilityScope,
modifier = Modifier.padding(
vertical = LocalPaddings.current.large / 2
)
)
},
sharedTransitionScope = sharedTransitionScope,
animatedVisibilityScope = animatedVisibilityScope,
)
else
/* With this, AnimatedContent shrinks/expands the
`HomeRow` vertically. */
Box(Modifier.fillMaxWidth())
}
}
}
},
contentModifier = Modifier.padding(
top = LocalPaddings.current.large,
bottom = LocalPaddings.current.large +
top = LocalPaddings.current.large / 2,
bottom = LocalPaddings.current.large / 2 +
dimensionResource(navigationR.dimen.navigation_bar_height)
),
verticalArrangement = Arrangement.spacedBy(LocalPaddings.current.large)
verticalArrangement = Arrangement.spacedBy(0.dp)
)
}
}
Expand Down Expand Up @@ -224,53 +238,45 @@ fun HomeRow(
animatedVisibilityScope: AnimatedVisibilityScope,
modifier: Modifier = Modifier
) {
AnimatedVisibility(
visible = list.isNotEmpty(),
enter = fadeIn(tween(delayMillis = 150)) + expandVertically(clip = false),
exit = fadeOut(spring(stiffness = Spring.StiffnessHigh))
+ shrinkVertically(tween(durationMillis = 500)),
label = "animate_media_list_enter_exit"
) {
MediaSmallRow(type.title, list, modifier) { media ->
with(sharedTransitionScope) {
MediaSmall(
image = media.coverImage,
label = media.title,
onClick = { onItemClicked(media) },
modifier = Modifier
.sharedBounds(
rememberSharedContentState(
SharedContentKey(
id = media.id,
source = type.name,
sharedComponents = Card to Page,
)
),
animatedVisibilityScope
)
.width(dimensionResource(coreR.dimen.media_card_width)),
imageModifier = Modifier.sharedBounds(
MediaSmallRow(type.title, list, modifier) { media ->
with(sharedTransitionScope) {
MediaSmall(
image = media.coverImage,
label = media.title,
onClick = { onItemClicked(media) },
modifier = Modifier
.sharedBounds(
rememberSharedContentState(
SharedContentKey(
id = media.id,
source = type.name,
sharedComponents = Image to Image,
sharedComponents = Card to Page,
)
),
animatedVisibilityScope,
animatedVisibilityScope
)
.width(dimensionResource(coreR.dimen.media_card_width)),
imageModifier = Modifier.sharedBounds(
rememberSharedContentState(
SharedContentKey(
id = media.id,
source = type.name,
sharedComponents = Image to Image,
)
),
textModifier = Modifier.sharedBounds(
rememberSharedContentState(
SharedContentKey(
id = media.id,
source = type.name,
sharedComponents = Text to Text,
)
),
animatedVisibilityScope,
animatedVisibilityScope,
),
textModifier = Modifier.sharedBounds(
rememberSharedContentState(
SharedContentKey(
id = media.id,
source = type.name,
sharedComponents = Text to Text,
)
),
)
}
animatedVisibilityScope,
),
)
}
}
}
Expand Down
40 changes: 13 additions & 27 deletions core/src/main/kotlin/com/imashnake/animite/core/ui/MediaSmall.kt
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
package com.imashnake.animite.core.ui

import android.content.res.Configuration
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.togetherWith
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
Expand Down Expand Up @@ -66,29 +61,20 @@ fun <T> MediaSmallRow(
.landscapeCutoutPadding()
)
}

AnimatedContent(
targetState = mediaList,
transitionSpec = {
fadeIn(tween(500)).togetherWith(fadeOut(tween(500)))
},
label = "animate_media_list_content"
LazyRow(
horizontalArrangement = Arrangement.spacedBy(LocalPaddings.current.small),
contentPadding = PaddingValues(
start = LocalPaddings.current.large + if (
LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE
) {
WindowInsets.displayCutout.asPaddingValues()
.calculateLeftPadding(LayoutDirection.Ltr)
} else 0.dp,
end = LocalPaddings.current.large
)
) {
LazyRow(
horizontalArrangement = Arrangement.spacedBy(LocalPaddings.current.small),
contentPadding = PaddingValues(
start = LocalPaddings.current.large + if (
LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE
) {
WindowInsets.displayCutout.asPaddingValues()
.calculateLeftPadding(LayoutDirection.Ltr)
} else 0.dp,
end = LocalPaddings.current.large
)
) {
items(it) { media ->
content(media)
}
items(mediaList) { media ->
content(media)
}
}
}
Expand Down

0 comments on commit fd39620

Please sign in to comment.