Skip to content

Commit 5a70e16

Browse files
commandironcommandiron
committed
Merge remote-tracking branch 'origin/master'
2 parents 7ad2709 + d470ab2 commit 5a70e16

1 file changed

Lines changed: 199 additions & 110 deletions

File tree

‎README.md‎

Lines changed: 199 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,203 @@
11
# AnimatableCompose [![](https://jitpack.io/v/commandiron/AnimatableCompose.svg)](https://jitpack.io/#commandiron/AnimatableCompose)
22

3-
Add Animatable Material Components in Android Jetpack Compose. Create basic ui animations painless.
3+
Add Animatable Material Components in Android Jetpack Compose.
4+
5+
Create jetpack compose animations painless.
46

57
## How it looks
68

7-
<img src="https://user-images.githubusercontent.com/50905347/197984728-7bfe5536-b78e-41e1-91cb-5bc167e51850.gif" width="250" height="530">
9+
<img src="https://user-images.githubusercontent.com/50905347/197984728-7bfe5536-b78e-41e1-91cb-5bc167e51850.gif" width="250" height="530">&nbsp;&nbsp;<img src="https://user-images.githubusercontent.com/50905347/198032696-f78f2b66-964c-494d-9614-14107ecde244.gif" width="250" height="530">
10+
11+
### Expandable Phone Number
12+
13+
<details closed>
14+
<summary>States</summary>
15+
<br>
16+
17+
18+
```kotlin
19+
//Create components state
20+
val animatableCardState = rememberAnimatableCardState(
21+
initialSize = DpSize(80.dp, 80.dp),
22+
targetSize = DpSize(Dp.Infinity, 120.dp),
23+
toTargetSizeAnimationSpec = tween(500, 500), // add delay(500) for target
24+
initialShape = RoundedCornerShape(32.dp),
25+
targetShape = RoundedCornerShape(0.dp),
26+
toTargetShapeAnimationSpec = tween(500, 500),
27+
initialOffset = DpOffset(0.dp, 0.dp),
28+
targetOffset = DpOffset(0.dp, - Dp.Infinity),
29+
toInitialOffsetAnimationSpec = tween(500, 500),
30+
)
31+
val animatableIconState = rememberAnimatableIconState(
32+
initialSize = DpSize(40.dp, 40.dp),
33+
targetSize = DpSize(80.dp, 80.dp),
34+
toTargetSizeAnimationSpec = tween(500,500),
35+
initialOffset = DpOffset(0.dp, 0.dp),
36+
targetOffset = DpOffset((-50).dp, 0.dp),
37+
toTargetOffsetAnimationSpec = tween(500, 500)
38+
)
39+
val animatableTextState = rememberAnimatableTextState(
40+
initialFontSize = 0.sp,
41+
targetFontSize = 26.sp,
42+
toTargetFontSizeAnimationSpec = tween(500, 500),
43+
initialOffset = DpOffset(0.dp, 0.dp),
44+
targetOffset = DpOffset((-25).dp, 0.dp),
45+
toTargetOffsetAnimationSpec = tween(500, 500)
46+
)
47+
48+
// Create shared state
49+
val sharedAnimatableState = rememberSharedAnimatableState(
50+
listOf(
51+
animatableCardState,
52+
animatableIconState, // default index = 0
53+
animatableIconState.copy( // create state with copy func. for same params.
54+
index = 1, // specify index for same components
55+
initialSize = DpSize(0.dp, 0.dp),
56+
targetSize = DpSize(36.dp, 36.dp),
57+
targetOffset = DpOffset(40.dp, 0.dp),
58+
),
59+
animatableTextState, // default index = 0
60+
animatableTextState.copy(
61+
index = 1, // specify index for same components
62+
targetFontSize = 12.sp
63+
)
64+
)
65+
)
66+
```
67+
</details>
68+
<details closed>
69+
<summary>Components</summary>
70+
<br>
71+
72+
73+
```kotlin
74+
AnimatableCard(
75+
onClick = {
76+
sharedAnimatableState.animate()
77+
},
78+
state = sharedAnimatableState // pass shared state
79+
) {
80+
Row(
81+
modifier = Modifier.fillMaxSize(),
82+
verticalAlignment = Alignment.CenterVertically,
83+
horizontalArrangement = Arrangement.Center
84+
) {
85+
AnimatableIcon(
86+
imageVector = Icons.Default.Person,
87+
contentDescription = null,
88+
state = sharedAnimatableState // pass shared state
89+
)
90+
Column {
91+
AnimatableText(
92+
text = "Emir Demirli",
93+
state = sharedAnimatableState // pass shared state
94+
)
95+
AnimatableText(
96+
text = "+90 0535 508 55 52",
97+
state = sharedAnimatableState, // pass shared state
98+
stateIndex = 1 // specify index for same components
99+
)
100+
}
101+
AnimatableIcon(
102+
imageVector = Icons.Default.Phone,
103+
contentDescription = null,
104+
state = sharedAnimatableState, // pass shared state
105+
stateIndex = 1 // specify index for same components
106+
)
107+
}
108+
}
109+
```
110+
</details>
111+
112+
### Card Dealer (just a few code)
113+
114+
<details closed>
115+
<summary>States</summary>
116+
<br>
8117

9-
## AnimatableText
118+
119+
```kotlin
120+
val cards by remember {
121+
mutableStateOf(listOf("A","K","Q","J","10","9","8","7","6","5","4","3","2"))
122+
}
123+
var deck by remember {
124+
mutableStateOf(cards + cards + cards + cards)
125+
}
126+
127+
val animatableCardState = rememberAnimatableCardState(
128+
initialSize = DpSize(64.dp, 64.dp),
129+
targetSize = DpSize(64.dp, 64.dp),
130+
initialOffset = DpOffset(0.dp, 120.dp),
131+
targetOffset = DpOffset(-Dp.Infinity, -Dp.Infinity)
132+
)
133+
val animatableTextState = rememberAnimatableTextState(
134+
initialFontSize = 0.sp,
135+
targetFontSize = 24.sp
136+
)
137+
138+
val cardStates = mutableListOf<AnimatableState>()
139+
val textStates = mutableListOf<AnimatableState>()
140+
141+
deck.indices.forEach {
142+
cardStates.add(
143+
animatableCardState.copy(
144+
index = it,
145+
toTargetOffsetAnimationSpec = tween(400, (it * 400)),
146+
targetOffset = DpOffset(if(it % 2 == 0) (-100).dp else 100.dp, (-150).dp)
147+
)
148+
)
149+
textStates.add(
150+
animatableTextState.copy(
151+
index = it,
152+
toTargetFontSizeAnimationSpec = tween(400, (it * 400))
153+
)
154+
)
155+
156+
}
157+
158+
val sharedAnimatableState = rememberSharedAnimatableState(cardStates + textStates)
159+
```
160+
</details>
161+
<details closed>
162+
<summary>Components</summary>
163+
<br>
164+
165+
166+
```kotlin
167+
Box(
168+
modifier = Modifier
169+
.fillMaxSize()
170+
.clickable {
171+
deck = deck.shuffled()
172+
sharedAnimatableState.animate()
173+
},
174+
contentAlignment = Alignment.Center
175+
) {
176+
deck.indices.forEach {
177+
AnimatableCard(
178+
onClick = {},
179+
state = sharedAnimatableState,
180+
stateIndex = it,
181+
fixedShape = RoundedCornerShape(16.dp)
182+
) {
183+
Box(Modifier.fillMaxSize(), Alignment.Center) {
184+
AnimatableText(
185+
text = deck[it],
186+
state = sharedAnimatableState,
187+
stateIndex = it
188+
)
189+
}
190+
}
191+
}
192+
}
193+
```
194+
</details>
195+
196+
## How to use
197+
198+
You can learn to use it step by step, you need to use state and components together.
199+
200+
### AnimatableText
10201

11202
<img src="https://user-images.githubusercontent.com/50905347/197984582-1988a82a-db0a-4e8f-a1f7-f0a134b8e45a.gif" width="250" height="530">
12203

@@ -50,7 +241,7 @@ Column(
50241
```
51242
</details>
52243

53-
## AnimatableBox
244+
### AnimatableBox
54245

55246
<img src="https://user-images.githubusercontent.com/50905347/197984666-b660f0b6-d9fb-469c-af08-b88cb2911deb.gif" width="250" height="530">
56247

@@ -66,7 +257,8 @@ val state = rememberAnimatableBoxState(
66257
targetSize = DpSize(Dp.Infinity, 120.dp), // set target size
67258
initialOffset = DpOffset(x = 0.dp, y = 0.dp), // set initial offset
68259
targetOffset = DpOffset(x = 0.dp, y = - Dp.Infinity) // set target offset
69-
// Dp.Infinity will take the maximum value according to the screen size
260+
// Dp.Infinity will take the maximum value according to the screen size,
261+
// ps: Dp.Infinity for offset needs centered component and sizes, however you may not use it if you want.
70262
)
71263
```
72264
</details>
@@ -93,7 +285,7 @@ AnimatableBox(
93285
```
94286
</details>
95287

96-
## AnimatableCard
288+
### AnimatableCard
97289

98290
<img src="https://user-images.githubusercontent.com/50905347/197984698-12536dc4-9a5b-40e1-9627-484738600b60.gif" width="250" height="530">
99291

@@ -103,7 +295,7 @@ AnimatableBox(
103295

104296
105297
```kotlin
106-
// Simply create box state and pass it to AnimatableBox
298+
// Simply create card state and pass it to AnimatableCard
107299
val animatableCardState = rememberAnimatableCardState(
108300
initialSize = DpSize(width = 70.dp, height = 70.dp),
109301
targetSize = DpSize(width = 200.dp, height = 70.dp),
@@ -139,109 +331,6 @@ Box(
139331
```
140332
</details>
141333

142-
## Multiple Animatable Components at the same time (Shared State)
143-
144-
<img src="https://user-images.githubusercontent.com/50905347/197984728-7bfe5536-b78e-41e1-91cb-5bc167e51850.gif" width="250" height="530">
145-
146-
<details closed>
147-
<summary>States</summary>
148-
<br>
149-
150-
151-
```kotlin
152-
//Create components state
153-
val animatableCardState = rememberAnimatableCardState(
154-
initialSize = DpSize(80.dp, 80.dp),
155-
targetSize = DpSize(Dp.Infinity, 120.dp),
156-
toTargetSizeAnimationSpec = tween(500, 500), // add delay(500) for target
157-
initialShape = RoundedCornerShape(32.dp),
158-
targetShape = RoundedCornerShape(0.dp),
159-
toTargetShapeAnimationSpec = tween(500, 500),
160-
initialOffset = DpOffset(0.dp, 0.dp),
161-
targetOffset = DpOffset(0.dp, - Dp.Infinity),
162-
toInitialOffsetAnimationSpec = tween(500, 500),
163-
)
164-
val animatableIconState = rememberAnimatableIconState(
165-
initialSize = DpSize(40.dp, 40.dp),
166-
targetSize = DpSize(80.dp, 80.dp),
167-
toTargetSizeAnimationSpec = tween(500,500),
168-
initialOffset = DpOffset(0.dp, 0.dp),
169-
targetOffset = DpOffset((-50).dp, 0.dp),
170-
toTargetOffsetAnimationSpec = tween(500, 500)
171-
)
172-
val animatableTextState = rememberAnimatableTextState(
173-
initialFontSize = 0.sp,
174-
targetFontSize = 26.sp,
175-
toTargetFontSizeAnimationSpec = tween(500, 500),
176-
initialOffset = DpOffset(0.dp, 0.dp),
177-
targetOffset = DpOffset((-25).dp, 0.dp),
178-
toTargetOffsetAnimationSpec = tween(500, 500)
179-
)
180-
181-
// Create shared state
182-
val sharedAnimatableState = rememberSharedAnimatableState(
183-
listOf(
184-
animatableCardState,
185-
animatableIconState, // default index = 0
186-
animatableIconState.copy( // create state with copy func. for same params.
187-
index = 1, // specify index for same components
188-
initialSize = DpSize(0.dp, 0.dp),
189-
targetSize = DpSize(36.dp, 36.dp),
190-
targetOffset = DpOffset(40.dp, 0.dp),
191-
),
192-
animatableTextState, // default index = 0
193-
animatableTextState.copy(
194-
index = 1, // specify index for same components
195-
targetFontSize = 12.sp
196-
)
197-
)
198-
)
199-
```
200-
</details>
201-
<details closed>
202-
<summary>Components</summary>
203-
<br>
204-
205-
206-
```kotlin
207-
AnimatableCard(
208-
onClick = {
209-
sharedAnimatableState.animate()
210-
},
211-
state = sharedAnimatableState // pass shared state
212-
) {
213-
Row(
214-
modifier = Modifier.fillMaxSize(),
215-
verticalAlignment = Alignment.CenterVertically,
216-
horizontalArrangement = Arrangement.Center
217-
) {
218-
AnimatableIcon(
219-
imageVector = Icons.Default.Person,
220-
contentDescription = null,
221-
state = sharedAnimatableState // pass shared state
222-
)
223-
Column {
224-
AnimatableText(
225-
text = "Emir Demirli",
226-
state = sharedAnimatableState // pass shared state
227-
)
228-
AnimatableText(
229-
text = "+90 0535 508 55 52",
230-
state = sharedAnimatableState, // pass shared state
231-
stateIndex = 1 // specify index for same components
232-
)
233-
}
234-
AnimatableIcon(
235-
imageVector = Icons.Default.Phone,
236-
contentDescription = null,
237-
state = sharedAnimatableState, // pass shared state
238-
stateIndex = 1 // specify index for same components
239-
)
240-
}
241-
}
242-
```
243-
</details>
244-
245334
## Setup
246335
1. Open the file `settings.gradle` (it looks like that)
247336
```groovy

0 commit comments

Comments
 (0)