-
-
Notifications
You must be signed in to change notification settings - Fork 87
/
crossfadeAnimation.kt
64 lines (56 loc) · 2.25 KB
/
crossfadeAnimation.kt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
package co.joebirch.composeplayground.animation
import androidx.compose.animation.Crossfade
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import co.joebirch.composeplayground.ComposableLayout
object CrossfadeAnimationView : ComposableLayout {
@Composable
override fun build() {
Column(
modifier = Modifier.fillMaxSize().padding(32.dp),
verticalArrangement = Arrangement.SpaceEvenly,
horizontalAlignment = Alignment.CenterHorizontally
) {
CrossfadeTextAnimation()
CrossfadeColorAnimation()
}
}
@Composable
fun CrossfadeTextAnimation() {
val strings = listOf("This the first text", "This is the second text")
var currentString = remember { mutableStateOf(strings[0]) }
Column(modifier = Modifier.fillMaxWidth()) {
Crossfade(targetState = currentString) { color ->
Text(
text = color.value, modifier = Modifier.fillMaxWidth().clickable(onClick = {
currentString.value = if (currentString.value == strings[0]) strings[1] else strings[0]
}),
style = TextStyle(textAlign = TextAlign.Center)
)
}
}
}
@Composable
fun CrossfadeColorAnimation() {
val colors = listOf(Color.Red, Color.Green)
val current = remember { mutableStateOf(colors[0]) }
Column(modifier = Modifier.fillMaxWidth()) {
Crossfade(targetState = current) { color ->
Box(Modifier.fillMaxWidth().height(120.dp).clickable(onClick = {
current.value = if (current.value == colors[0]) colors[1] else colors[0]
}).background(current.value))
}
}
}
}