Guy Bieber
09/30/2020, 8:56 PMVinay Gaba
09/30/2020, 9:35 PMGuy Bieber
09/30/2020, 10:00 PM@Composable
fun RepeatedRotationDemo() {
val state = remember { mutableStateOf(RotationStates.Original) }
Column(
Modifier.fillMaxSize()
.wrapContentSize(Alignment.Center),
verticalArrangement = Arrangement.SpaceEvenly
) {
val textStyle = TextStyle(fontSize = 18.sp)
Text(
modifier = Modifier.tapGestureFilter(onTap = { state.value = RotationStates.Rotated }),
text = "Rotate 10 times",
style = textStyle
)
Text(
modifier = Modifier.tapGestureFilter(onTap = { state.value = RotationStates.Original }),
text = "Reset",
style = textStyle
)
val transitionState = transition(
definition = definition,
toState = state.value
)
Canvas(Modifier.preferredSize(100.dp)) {
rotate(transitionState[rotation], 0.0f, 0.0f) {
drawRect(Color(0xFF00FF00))
}
}
}
}
private enum class RotationStates {
Original,
Rotated
}
private val rotation = FloatPropKey()
private val definition = transitionDefinition<RotationStates> {
state(RotationStates.Original) {
this[rotation] = 0f
}
state(RotationStates.Rotated) {
this[rotation] = 360f
}
transition(RotationStates.Original to RotationStates.Rotated) {
rotation using repeatable(
iterations = 10,
animation = tween(
easing = LinearEasing,
durationMillis = 1000
)
)
}
transition(RotationStates.Rotated to RotationStates.Original) {
rotation using tween(
durationMillis = 300
)
}
}
Vinay Gaba
09/30/2020, 10:07 PMGuy Bieber
09/30/2020, 10:21 PM@Composable
fun Rotate ( durationMillis : Int, rotations : Int, children: @Composable() () -> kotlin.Unit) {
val state = remember { mutableStateOf(RotationStates.Original) }
val rotation = FloatPropKey()
val definition = transitionDefinition<RotationStates> {
state(RotationStates.Original) {
this[rotation] = 0f
}
state(RotationStates.Rotated) {
this[rotation] = 360f
}
transition(RotationStates.Original to RotationStates.Rotated) {
rotation using repeatable(
iterations = rotations,
animation = tween(
easing = LinearEasing,
durationMillis = durationMillis
)
)
}
transition(RotationStates.Rotated to RotationStates.Original) {
rotation using tween(
durationMillis = durationMillis
)
}
}
val transitionState = transition(
definition = definition,
toState = state.value
)
Canvas(Modifier.preferredSize(100.dp)) {
rotate(transitionState[rotation], 0.0f, 0.0f) {
children()
}
}
}
@Composable invocations can only happen from the context of a @Composable functionVinay Gaba
09/30/2020, 11:05 PMCanvas
with a Box
and you can then use this
Modifier.drawLayer(rotationZ = transitionState[rotation])
Guy Bieber
09/30/2020, 11:23 PMprivate enum class RotationStates {
Original,
Rotated
}
@Composable
fun Rotate ( durationMillis : Int, rotations : Int, children: @Composable() () -> kotlin.Unit) {
val state = remember { mutableStateOf(RotationStates.Original) }
val rotation = FloatPropKey()
val definition = transitionDefinition<RotationStates> {
state(RotationStates.Original) {
this[rotation] = 0f
}
state(RotationStates.Rotated) {
this[rotation] = 360f
}
transition(RotationStates.Original to RotationStates.Rotated) {
rotation using repeatable(
iterations = rotations,
animation = tween(
easing = LinearEasing,
durationMillis = durationMillis
)
)
}
transition(RotationStates.Rotated to RotationStates.Original) {
rotation using tween(
durationMillis = durationMillis
)
}
}
if (state.value == RotationStates.Original) {
state.value = RotationStates.Rotated
} else {
state.value = RotationStates.Original
}
val transitionState = transition(
definition = definition,
toState = state.value
)
Box (
Modifier.drawLayer(rotationZ = transitionState[rotation],)
) {
children()
}
}
Vinay Gaba
09/30/2020, 11:54 PMBox(
modifier = Modifier.fillMaxSize()
.drawLayer(rotationZ = state[rotation]),
gravity = ContentGravity.Center,
) {
children()
}
https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example/raw/master/screenshots/animation_rotation.gif▾