Skip to content

Commit 5397b3a

Browse files
commandironcommandiron
committed
Merge remote-tracking branch 'origin/master'
2 parents 3682a5a + 39a8845 commit 5397b3a

1 file changed

Lines changed: 267 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
# AnimatableCompose [![](https://jitpack.io/v/commandiron/AnimatableCompose.svg)](https://jitpack.io/#commandiron/AnimatableCompose)
2+
3+
Add Animatable Material Components in Android Jetpack Compose. Create basic ui animations painless.
4+
5+
## How it looks
6+
7+
<img src="https://user-images.githubusercontent.com/50905347/197984728-7bfe5536-b78e-41e1-91cb-5bc167e51850.gif" width="250" height="530">
8+
9+
## AnimatableText
10+
11+
<img src="https://user-images.githubusercontent.com/50905347/197984582-1988a82a-db0a-4e8f-a1f7-f0a134b8e45a.gif" width="250" height="530">
12+
13+
<details closed>
14+
<summary>State</summary>
15+
<br>
16+
17+
18+
```kotlin
19+
// Simply create state and pass it to AnimatableText
20+
val state = rememberAnimatableTextState(
21+
initialFontSize = 12.sp,
22+
targetFontSize = 60.sp
23+
)
24+
```
25+
</details>
26+
<details closed>
27+
<summary>Component</summary>
28+
<br>
29+
30+
31+
```kotlin
32+
Column(
33+
modifier = Modifier
34+
.fillMaxSize()
35+
.clickable {
36+
state.animate() // animate
37+
},
38+
verticalArrangement = Arrangement.Center,
39+
horizontalAlignment = Alignment.CenterHorizontally
40+
) {
41+
AnimatableText(
42+
text = "Animatable",
43+
state = state // pass state
44+
)
45+
AnimatableText(
46+
text = "Compose",
47+
state = state // pass state
48+
)
49+
}
50+
```
51+
</details>
52+
53+
## AnimatableBox
54+
55+
<img src="https://user-images.githubusercontent.com/50905347/197984666-b660f0b6-d9fb-469c-af08-b88cb2911deb.gif" width="250" height="530">
56+
57+
<details closed>
58+
<summary>State</summary>
59+
<br>
60+
61+
62+
```kotlin
63+
// Simply create box state and pass it to AnimatableBox
64+
val state = rememberAnimatableBoxState(
65+
initialSize = DpSize(60.dp, 60.dp), // set initial size
66+
targetSize = DpSize(Dp.Infinity, 120.dp), // set target size
67+
initialOffset = DpOffset(x = 0.dp, y = 0.dp), // set initial offset
68+
targetOffset = DpOffset(x = 0.dp, y = - Dp.Infinity) // set target offset
69+
// Dp.Infinity will take the maximum value according to the screen size
70+
)
71+
```
72+
</details>
73+
<details closed>
74+
<summary>Component</summary>
75+
<br>
76+
77+
78+
```kotlin
79+
AnimatableBox(
80+
modifier = Modifier
81+
.border(1.dp, Color.Red)
82+
.clickable {
83+
state.animate()
84+
},
85+
state = state
86+
) {
87+
Icon(
88+
modifier = Modifier.padding(8.dp),
89+
imageVector = Icons.Default.Add,
90+
contentDescription = null
91+
)
92+
}
93+
```
94+
</details>
95+
96+
## AnimatableCard
97+
98+
<img src="https://user-images.githubusercontent.com/50905347/197984698-12536dc4-9a5b-40e1-9627-484738600b60.gif" width="250" height="530">
99+
100+
<details closed>
101+
<summary>State</summary>
102+
<br>
103+
104+
105+
```kotlin
106+
// Simply create box state and pass it to AnimatableBox
107+
val animatableCardState = rememberAnimatableCardState(
108+
initialSize = DpSize(width = 70.dp, height = 70.dp),
109+
targetSize = DpSize(width = 200.dp, height = 70.dp),
110+
initialShape = CircleShape,
111+
targetShape = RoundedCornerShape(0.dp, 0.dp, 24.dp, 0.dp),
112+
initialOffset = DpOffset(x = 0.dp, y = 0.dp),
113+
targetOffset = DpOffset(x = - Dp.Infinity, y = - Dp.Infinity)
114+
)
115+
```
116+
</details>
117+
<details closed>
118+
<summary>Component</summary>
119+
<br>
120+
121+
122+
```kotlin
123+
Box(
124+
modifier = Modifier
125+
.fillMaxSize()
126+
.clickable {
127+
animatableCardState.animateToInitial() // animate to initial
128+
},
129+
contentAlignment = Alignment.Center
130+
) {
131+
AnimatableCard(
132+
modifier = Modifier.size(100.dp),
133+
onClick = {
134+
animatableCardState.animateToTarget() // animate to target
135+
},
136+
state = animatableCardState
137+
) {}
138+
}
139+
```
140+
</details>
141+
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),
157+
initialShape = RoundedCornerShape(32.dp),
158+
targetShape = RoundedCornerShape(0.dp),
159+
toTargetShapeAnimationSpec = tween(500, 500),
160+
toTargetAlphaAnimationSpec = tween(500, 500),
161+
initialOffset = DpOffset(0.dp, 0.dp),
162+
targetOffset = DpOffset(0.dp, - Dp.Infinity),
163+
toInitialOffsetAnimationSpec = tween(500, 500),
164+
)
165+
val animatableIconState = rememberAnimatableIconState(
166+
initialSize = DpSize(40.dp, 40.dp),
167+
targetSize = DpSize(80.dp, 80.dp),
168+
toTargetSizeAnimationSpec = tween(500,500),
169+
initialOffset = DpOffset(0.dp, 0.dp),
170+
targetOffset = DpOffset((-50).dp, 0.dp),
171+
toTargetOffsetAnimationSpec = tween(500, 500)
172+
)
173+
val animatableTextState = rememberAnimatableTextState(
174+
initialFontSize = 0.sp,
175+
targetFontSize = 26.sp,
176+
toTargetFontSizeAnimationSpec = tween(500, 500),
177+
initialOffset = DpOffset(0.dp, 0.dp),
178+
targetOffset = DpOffset((-25).dp, 0.dp),
179+
toTargetOffsetAnimationSpec = tween(500, 500)
180+
)
181+
182+
// Create shared state
183+
val sharedAnimatableState = rememberSharedAnimatableState(
184+
listOf(
185+
animatableCardState,
186+
animatableIconState, // default index = 0
187+
animatableIconState.copy( // create state with copy func. for same params.
188+
index = 1, // specify index for same components
189+
initialSize = DpSize(0.dp, 0.dp),
190+
targetSize = DpSize(36.dp, 36.dp),
191+
targetOffset = DpOffset(40.dp, 0.dp),
192+
),
193+
animatableTextState, // default index = 0
194+
animatableTextState.copy(
195+
index = 1, // specify index for same components
196+
targetFontSize = 12.sp
197+
)
198+
)
199+
)
200+
```
201+
</details>
202+
<details closed>
203+
<summary>Components</summary>
204+
<br>
205+
206+
207+
```kotlin
208+
AnimatableCard(
209+
onClick = {
210+
sharedAnimatableState.animate()
211+
},
212+
state = sharedAnimatableState // pass shared state
213+
) {
214+
Row(
215+
modifier = Modifier.fillMaxSize(),
216+
verticalAlignment = Alignment.CenterVertically,
217+
horizontalArrangement = Arrangement.Center
218+
) {
219+
AnimatableIcon(
220+
imageVector = Icons.Default.Person,
221+
contentDescription = null,
222+
state = sharedAnimatableState // pass shared state
223+
)
224+
Column {
225+
AnimatableText(
226+
text = "Emir Demirli",
227+
state = sharedAnimatableState // pass shared state
228+
)
229+
AnimatableText(
230+
text = "+90 0535 508 55 52",
231+
state = sharedAnimatableState, // pass shared state
232+
stateIndex = 1 // specify index for same components
233+
)
234+
}
235+
AnimatableIcon(
236+
imageVector = Icons.Default.Phone,
237+
contentDescription = null,
238+
state = sharedAnimatableState, // pass shared state
239+
stateIndex = 1 // specify index for same components
240+
)
241+
}
242+
}
243+
```
244+
</details>
245+
246+
## Setup
247+
1. Open the file `settings.gradle` (it looks like that)
248+
```groovy
249+
dependencyResolutionManagement {
250+
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
251+
repositories {
252+
google()
253+
mavenCentral()
254+
// add jitpack here 👇🏽
255+
maven { url 'https://jitpack.io' }
256+
...
257+
}
258+
}
259+
...
260+
```
261+
2. Sync the project
262+
3. Add dependencies
263+
```groovy
264+
dependencies {
265+
implementation 'com.github.commandiron:AnimatableCompose:1.0.0'
266+
}
267+
```

0 commit comments

Comments
 (0)