Skip to content

Commit 0abacb5

Browse files
commandironcommandiron
committed
AnimatableSpacer.kt added.
1 parent 02fee44 commit 0abacb5

File tree

2 files changed

+75
-72
lines changed

2 files changed

+75
-72
lines changed

‎animatable-compose/src/main/java/com/commandiron/animatable_compose/state/AnimatableState.kt‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -907,7 +907,29 @@ enum class AnimationState {
907907
}
908908

909909
enum class AnimatableStateTag {
910-
BOX, TEXT, CARD, ICON, LAZY_ROW, SPACER
910+
SPACER, TEXT, BOX, CARD, ICON, LAZY_ROW,
911+
}
912+
913+
@Composable
914+
fun rememberAnimatableSpacerState(
915+
index: Int = 0,
916+
initialSize: DpSize? = null,
917+
targetSize: DpSize? = null,
918+
toTargetSizeAnimationSpec: AnimationSpec<Size>? = tween(500),
919+
toInitialSizeAnimationSpec: AnimationSpec<Size>? = tween(500),
920+
onSizeAnimation: (AnimationState) -> Unit = {}
921+
): AnimatableState {
922+
return remember {
923+
AnimatableState(
924+
animatableStateTag = AnimatableStateTag.SPACER,
925+
index = index,
926+
initialSize = initialSize,
927+
targetSize = targetSize,
928+
toTargetSizeAnimationSpec = toTargetSizeAnimationSpec,
929+
toInitialSizeAnimationSpec = toInitialSizeAnimationSpec,
930+
onSizeAnimation = onSizeAnimation
931+
)
932+
}
911933
}
912934

913935
@Composable
@@ -1178,26 +1200,4 @@ fun rememberAnimatableLazyRowState(
11781200
onAnimation = onAnimation
11791201
)
11801202
}
1181-
}
1182-
1183-
@Composable
1184-
fun rememberAnimatableSpacerState(
1185-
index: Int = 0,
1186-
initialSize: DpSize? = null,
1187-
targetSize: DpSize? = null,
1188-
toTargetSizeAnimationSpec: AnimationSpec<Size>? = null,
1189-
toInitialSizeAnimationSpec: AnimationSpec<Size>? = null,
1190-
onSizeAnimation: (AnimationState) -> Unit = {},
1191-
): AnimatableState {
1192-
return remember {
1193-
AnimatableState(
1194-
animatableStateTag = AnimatableStateTag.SPACER,
1195-
index = index,
1196-
initialSize = initialSize,
1197-
targetSize = targetSize,
1198-
toTargetSizeAnimationSpec = toTargetSizeAnimationSpec,
1199-
toInitialSizeAnimationSpec = toInitialSizeAnimationSpec,
1200-
onSizeAnimation = onSizeAnimation
1201-
)
1202-
}
12031203
}

‎app/src/main/java/com/commandiron/animatablecompose/Show8InfoCard.kt‎

Lines changed: 52 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@ package com.commandiron.animatablecompose
33
import androidx.compose.animation.core.tween
44
import androidx.compose.foundation.layout.*
55
import androidx.compose.foundation.lazy.LazyColumn
6+
import androidx.compose.foundation.lazy.LazyRow
67
import androidx.compose.foundation.lazy.rememberLazyListState
78
import androidx.compose.foundation.shape.RoundedCornerShape
89
import androidx.compose.material3.CardDefaults
910
import androidx.compose.material3.Text
1011
import androidx.compose.runtime.*
1112
import androidx.compose.ui.Alignment
1213
import androidx.compose.ui.Modifier
14+
import androidx.compose.ui.draw.clip
1315
import androidx.compose.ui.graphics.Color
1416
import androidx.compose.ui.layout.ContentScale
1517
import androidx.compose.ui.text.font.FontWeight
@@ -35,12 +37,6 @@ fun Show8InfoCard() {
3537
val scope = rememberCoroutineScope()
3638
var selectedIndex by remember { mutableStateOf(0) }
3739

38-
val animatableLazyRowState = rememberAnimatableLazyRowState(
39-
initialSize = DpSize(width = Dp.Infinity, height = 180.dp),
40-
targetSize = DpSize(width = Dp.Infinity, height = 340.dp),
41-
initialOffset = DpOffset(0.dp, 0.dp),
42-
targetOffset = DpOffset(0.dp, - Dp.Infinity)
43-
)
4440
val animatableCardState = rememberAnimatableCardState(
4541
initialSize = DpSize(width = 340.dp, height = 180.dp),
4642
targetSize = DpSize(width = Dp.Infinity, height = 340.dp),
@@ -49,6 +45,19 @@ fun Show8InfoCard() {
4945
toTargetShapeAnimationSpec = tween(750),
5046
initialPadding = PaddingValues(horizontal = 8.dp),
5147
targetPadding = PaddingValues(0.dp),
48+
onAnimation = {
49+
when(it) {
50+
AnimationState.INITIAL -> {}
51+
AnimationState.INITIAL_TO_TARGET -> {
52+
scope.launch {
53+
delay(500)
54+
lazyListState.animateScrollToItem(selectedIndex)
55+
}
56+
}
57+
AnimationState.TARGET -> {}
58+
AnimationState.TARGET_TO_INITIAL -> {}
59+
}
60+
}
5261
)
5362
val animatableBoxState = rememberAnimatableBoxState(
5463
initialAlignment = Alignment.Center,
@@ -58,14 +67,14 @@ fun Show8InfoCard() {
5867
initialFontSize = 0.sp,
5968
targetFontSize = 12.sp,
6069
initialOffset = DpOffset(x = 0.dp, y = 300.dp),
61-
targetOffset = DpOffset(x = 0.dp, y = 0.dp)
70+
targetOffset = DpOffset(x = 0.dp, y = 0.dp),
71+
toTargetAnimationSpec = tween(250)
6272
)
6373
val animatableSpacerState = rememberAnimatableSpacerState(
6474
initialSize = DpSize(width = 0.dp, height = 0.dp),
65-
targetSize = DpSize(width = 0.dp, height = 16.dp),
75+
targetSize = DpSize(width = 0.dp, height = 16.dp)
6676
)
6777

68-
6978
val infoCards by remember { mutableStateOf(InfoCard.infoCards) }
7079

7180
val cardStates = mutableListOf<AnimatableState>()
@@ -76,62 +85,49 @@ fun Show8InfoCard() {
7685
infoCards.indices.forEach { index ->
7786
cardStates.add(
7887
animatableCardState.copy(
79-
index = index,
80-
onAnimation = {
81-
when(it) {
82-
AnimationState.INITIAL -> {}
83-
AnimationState.INITIAL_TO_TARGET -> {
84-
scope.launch {
85-
delay(150)
86-
lazyListState.animateScrollToItem(selectedIndex)
87-
}
88-
}
89-
AnimationState.TARGET -> {}
90-
AnimationState.TARGET_TO_INITIAL -> {}
91-
}
92-
},
93-
toTargetAnimationSpec = tween(250)
88+
index = index
9489
)
9590
)
9691
boxStates.add(
9792
animatableBoxState.copy(
98-
index = index,
99-
toTargetAnimationSpec = tween(250)
93+
index = index
10094
)
10195
)
10296
textStates.add(
10397
animatableTextState.copy(
104-
index = index,
105-
toTargetAnimationSpec = tween(250)
98+
index = index
10699
)
107100
)
101+
if(index == 0) {
102+
spacerStates.add(
103+
animatableSpacerState.copy(
104+
index = index,
105+
initialSize = DpSize(width = 0.dp, height = 300.dp),
106+
targetSize = DpSize(width = 0.dp, height = 0.dp)
107+
)
108+
)
109+
}
108110
spacerStates.add(
109111
animatableSpacerState.copy(
110-
index = index,
111-
toTargetAnimationSpec = tween(250),
112-
toInitialAnimationSpec = tween(250)
112+
index = index + 1,
113113
)
114114
)
115-
116115
}
117116

118117
val sharedAnimatableState = rememberSharedAnimatableState(
119-
animatableStates = listOf(animatableLazyRowState)
120-
+ cardStates
121-
+ boxStates
122-
+ textStates
123-
+ spacerStates
118+
animatableStates = cardStates + boxStates + textStates + spacerStates
124119
)
125120

126-
Box(
121+
Column(
127122
modifier = Modifier.fillMaxSize(),
128-
contentAlignment = Alignment.Center
129123
) {
130-
AnimatableLazyRow(
131-
verticalAlignment = Alignment.CenterVertically,
132-
lazyListState = lazyListState,
133-
flingBehavior = snapperFlingBehavior,
124+
AnimatableSpacer(
134125
state = sharedAnimatableState
126+
)
127+
LazyRow(
128+
verticalAlignment = Alignment.CenterVertically,
129+
state = lazyListState,
130+
flingBehavior = snapperFlingBehavior
135131
) {
136132
items(infoCards.size) { index ->
137133
AnimatableCard(
@@ -165,8 +161,14 @@ fun Show8InfoCard() {
165161
fontSize = 22.sp,
166162
fontWeight = FontWeight.Bold
167163
)
164+
Text(
165+
modifier = Modifier.align(Alignment.CenterStart),
166+
text = "MGS 1",
167+
fontSize = 12.sp,
168+
color = Color.Gray
169+
)
168170
AnimatableSpacer(
169-
stateIndex = index,
171+
stateIndex = index + 1,
170172
state = sharedAnimatableState
171173
)
172174
AnimatableText(
@@ -177,10 +179,12 @@ fun Show8InfoCard() {
177179
)
178180
}
179181
}
180-
181182
}
182183
AsyncImage(
183-
modifier = Modifier.weight(1f),
184+
modifier = Modifier
185+
.weight(1f)
186+
.padding(8.dp)
187+
.clip(RoundedCornerShape(32.dp)),
184188
model = infoCards[index].imageUrl,
185189
contentDescription = null,
186190
contentScale = ContentScale.Crop
@@ -190,7 +194,6 @@ fun Show8InfoCard() {
190194
}
191195
}
192196
}
193-
194197
}
195198

196199

@@ -218,7 +221,7 @@ data class InfoCard(
218221
),
219222
InfoCard(
220223
"https://static.wikia.nocookie.net/metalgear/images/3/36/Mantis1I1.png/revision/latest?cb=20130211020311",
221-
"Psycho Mantis",
224+
"Mantis",
222225
"\"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio."
223226
),
224227
InfoCard(
@@ -233,7 +236,7 @@ data class InfoCard(
233236
),
234237
InfoCard(
235238
"https://static.wikia.nocookie.net/metalgear/images/c/c8/SolidusHD.jpg/revision/latest/top-crop/width/360/height/360?cb=20140930091309",
236-
"Solidus Snake",
239+
"Solidus",
237240
"\"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio."
238241
),
239242
InfoCard(

0 commit comments

Comments
 (0)