Ayfri
07/15/2021, 4:07 AMLuis
07/15/2021, 5:19 AMLuis
07/15/2021, 5:21 AMLuis
07/15/2021, 5:21 AMLuis
07/15/2021, 5:21 AMAyfri
07/15/2021, 7:13 AMLuis
07/15/2021, 7:19 AMAyfri
07/15/2021, 7:36 AMAyfri
07/15/2021, 7:37 AMLuis
07/15/2021, 8:40 AMLuis
07/15/2021, 8:40 AMval alpha: Float by animateFloatAsState(if (enabled) 1f else 0.5f)
Box(
Modifier.fillMaxSize()
.graphicsLayer(alpha = alpha)
.background(Color.Red)
)
This example has a property enabled
Luis
07/15/2021, 8:41 AMvar enabled by remember { mutableStateOf(false) }
declare something like this, and then make your animated property change based on that variableAyfri
07/15/2021, 8:54 AMAyfri
07/15/2021, 8:56 AM@Composable
fun AddTaskButton(todos: MutableState<List<Todo>>, text: MutableState<TextFieldValue>, size: MutableState<Int>) {
Box(modifier = Modifier) {}
Button(
modifier = Modifier.fillMaxHeight(),
onClick = { addTask(text, todos, size) },
colors = ButtonDefaults.buttonColors(Color.LightGray)
) {
Text("Add task")
}
}
Ayfri
07/15/2021, 8:58 AMfun main() = Window(title = "Test", size = IntSize(1600, 900)) {
val size = remember { mutableStateOf(1) }
val todos = remember { mutableStateOf(listOf(Todo("test #${size.value}"))) }
val text = remember { mutableStateOf(TextFieldValue()) }
MaterialTheme {
LocalAppWindow.current.keyboard.onKeyEvent = {
if (it.key == Key.Enter) {
addTask(text, todos, size)
true
} else false
}
AddTaskButton(todos, text, size)
todos.value.forEach {
Task(it, todos) // this is another composable, not important here
}
}
}
Luis
07/15/2021, 10:49 AMAyfri
07/15/2021, 10:51 AM@Composable
fun shake() = spring<IntOffset>(
dampingRatio = Spring.DampingRatioHighBouncy,
stiffness = Spring.StiffnessVeryLow
)
Ayfri
07/15/2021, 10:51 AMLuis
07/15/2021, 10:53 AMoffset
modifier on the button you want to animate. on the offset property, instead of passing a regular distance, pass a animated*
like in the exampleLuis
07/15/2021, 11:00 AMAyfri
07/15/2021, 11:00 AMval offset: IntOffset by animateIntOffsetAsState(
targetValue = IntOffset(10, 10),
animationSpec = shake(),
)
Button(
modifier = Modifier.fillMaxHeight().offset { offset },
// [...]
Ayfri
07/15/2021, 11:01 AMtargetValue
Ayfri
07/15/2021, 11:02 AMLuis
07/15/2021, 11:29 AM.offset(x = offset)
instead, if you only need to shake horizontallyLuis
07/15/2021, 11:29 AMLuis
07/15/2021, 11:30 AMvar enabled by remember { mutableStateOf(false) }
Luis
07/15/2021, 11:30 AMLuis
07/15/2021, 11:30 AMtargetValue = if (enabled) 10 else 0
Luis
07/15/2021, 11:31 AMLuis
07/15/2021, 11:32 AMAyfri
07/15/2021, 11:34 AMenabled
is a property to define if you can click on the button, not when it is clickedLuis
07/15/2021, 10:53 PMLuis
07/15/2021, 10:54 PMvar potatoes by remember { mutableStateOf(false) }
Luis
07/15/2021, 10:54 PMval offset: IntOffset by animateIntOffsetAsState(
targetValue = if (potatoes) IntOffset(10, 10) else IntOffset(0,0),
animationSpec = shake(),
)
Button(
modifier = Modifier.fillMaxHeight().offset { offset },
// [...]
Ayfri
07/15/2021, 10:56 PMpotatoes
? this is what I'm askingLuis
07/15/2021, 11:17 PMLuis
07/15/2021, 11:17 PMLuis
07/15/2021, 11:17 PMvar potatoes by remember { mutableStateOf(false) }
val offset: IntOffset by animateIntOffsetAsState(
targetValue = if (potatoes) IntOffset(10, 10) else IntOffset(0,0),
animationSpec = shake(),
)
Button(
modifier = Modifier.fillMaxHeight().offset { offset },
// [...]
Ayfri
07/15/2021, 11:41 PMonClick()
function of my button but doesn't this will activate the animation for ever ? or just one time ?Jason Ankers
07/16/2021, 2:34 AMval shouldAnimate by remember { mutableStateOf(false) }
val offset: IntOffset by animateIntOffsetAsState(
targetValue = if (shouldAnimate) IntOffset(10, 10) else IntOffset(0,0),
animationSpec = shake(),
finishedListener = { shouldAnimate = false }
)
Button(onClick = {shouldAnimate = true})
Ayfri
07/16/2021, 2:38 AMAyfri
07/16/2021, 2:40 AMIntOffset
which is logic because it's what we defined, but I want a shake
effect so how should I do it ?Ayfri
07/16/2021, 3:12 AMLuis
07/16/2021, 4:03 AM