| export BASH_SILENCE_DEPRECATION_WARNING=1 | |
| export CLICOLOR=1 | |
| export PATH="/usr/local/sbin:$PATH" | |
| export PATH="~/bin:$PATH" | |
| export PATH="/usr/local/opt/openjdk@11/bin:$PATH" | |
| export ANDROID_SDK_ROOT="/Users/juan/Library/Android/sdk" | |
| export ANDROID_HOME="/Users/juan/Library/Android/sdk" |
| val transition = updateTransition(selectedExpense != null, label = "transition") | |
| val height by transition.animateDp( | |
| label = "height", | |
| transitionSpec = { tween(bottomSheeAnimationInMillis) }, | |
| targetValueByState = { isItSelected -> | |
| configuration.screenHeightDp.dp * if (isItSelected) 1.0f else 0.8f | |
| } | |
| ) | |
| val roundCornerRadio by transition.animateDp( | |
| label = "roundCorners", |
| Crossfade(targetState = selectedExpense, animationSpec = tween(rowAnimationInMillis)) { saveableExpense -> | |
| if (saveableExpense != null) { | |
| EditExpenseScreen(saveableExpense.asExpense()) | |
| } else { | |
| ViewExpensesScreen() | |
| } | |
| } |
| val transitionState = remember { MutableTransitionState(AnimationState.NOT_STARTED) } | |
| val transition = updateTransition(transitionState, label = "transition") | |
| val elevation by transition.animateDp( | |
| label = "elevation", | |
| targetValueByState = { if (it.hasStarted()) 14.dp else 0.dp } | |
| ) |
| AnimatedVisibility(visible) { | |
| AnyComposable() | |
| } |
| if(visible) { | |
| AnyComposable() | |
| } |
| @Composable | |
| fun AddNewPerson(onAddNewPayerClick: (() -> Unit)? = null) { | |
| Row( | |
| modifier = Modifier | |
| .height(56.dp) | |
| .fillMaxWidth() | |
| .clickable { | |
| onAddNewPayerClick?.invoke() | |
| } | |
| .padding(horizontal = 16.dp, vertical = 8.dp), |
| @Composable | |
| internal fun EditExpenseContent( | |
| state: EditState, | |
| onEditExpense: ((Expense) -> Unit)? = null, | |
| onPayerClicked: ((Payer) -> Unit)? = null, | |
| onAddNewPayerClicked: (() -> Unit)? = null, | |
| onReceiverCheckedChange: ((Receiver) -> Unit)? = null, | |
| onAddNewReceiverClick: (() -> Unit)? = null, | |
| ) { | |
| var title by rememberSaveable { mutableStateOf(state.expense?.title.orEmpty()) } |
| data class EditState( | |
| val expense: Expense? = null, | |
| val payers: List<Payer> = emptyList(), | |
| val receivers: List<Receiver> = emptyList(), | |
| val selectedPayer: Payer? = null, | |
| val selectedReceiver: Receiver? = null, | |
| ) { | |
| fun total() = payers.sumOf { it.amount } | |
| } |
Everything became easier when I realized that compose animations are just and effect when the state changes. How do the animate* funcrtions work? they just the value in a small increment everytime they are called. That changes the state of the composable so the compose engine would render another frame of the animation.
Animations like container transform can be break down into small steps, for the following animation:
The steps would be:
