AnimatedVisbilityExample.kt

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.EnterExitState
import androidx.compose.animation.EnterTransition
import androidx.compose.animation.ExitTransition
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.animateColor
import androidx.compose.animation.core.MutableTransitionState
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
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.unit.dp

/**
 * 前置知识
 * 
 * 1. animationSpec
 * 2. updateTransition
 */

/**
 * AnimatedVisibility
 *
 * 1. 为 content 的显示与否加上动画，通过 enter 和 exit 参数来设置具体的过渡。
 * 可以使用 + 连接多个过渡，每个过渡都可以设置本身的行为，比如设置 animation spec。
 *
 * 2. 使用 MutableTransitionState，我们可以让其在首次重组时触发动画，
 * 也可以便于我们观察当前的动画状态
 *
 * 3. 在 AnimatedVisibility content 中的组件可以使用 animateEnterExit modifier
 * 来指定不同的动画，最终呈现形式为各个动画的组合。（需要注意 modifier 的调用顺序）
 * 此外，我们可以使用 XXXXTransition.None 取消 AnimatedVisibility 的动画，以让每个子组件实现自己的动画。
 *
 * 4. 自定义动画，在 content block 中我们可以拿到 transition 实例，所有被添加进来的动画状态都会同步改变。
 * AnimatedVisibility 会等到所有相关的动画都结束之后再移除它的 content。
 * 而随着独立的 Transition 创建的退出动画，则无法保证在动画结束前 content 不被移除。
 *
 * @see <a href="https://developer.android.com/jetpack/compose/animation#entertransition">
 *   进场过渡示例</a>
 */
@ExperimentalAnimationApi
@Composable
fun AnimatedVisibilityExample(
  modifier: Modifier = Modifier,
) {
  Column(
    modifier = modifier,
    horizontalAlignment = Alignment.CenterHorizontally
  ) {
    // var visible by remember { mutableStateOf(true) }
    val visibleState = remember {
      MutableTransitionState(false).apply {
        targetState = true
      }
    }

    Button(
      onClick = {
        // visible = !visible
        visibleState.targetState = !visibleState.targetState
      },
      modifier = Modifier.padding(8.dp)
    ) {
      Text(text = "change it")
    }

    Text(text = if (!visibleState.isIdle) "animating" else "stable")

    AnimatedVisibility(
      // visible = visible,
      visibleState = visibleState,
      // enter = slideInHorizontally() + fadeIn(),
      // exit = slideOutHorizontally() + fadeOut(),
      enter = EnterTransition.None,
      exit = ExitTransition.None
    ) {
      val background by transition.animateColor { state ->
        if (state == EnterExitState.Visible) Color.Red else Color.Green
      }

      Box(
        modifier = Modifier
          .padding(8.dp)
          .size(50.dp)
          .background(Color.Yellow)
      ) {
        Box(modifier = Modifier
          .align(Alignment.Center)
          .animateEnterExit()
          .size(30.dp)
          .background(background)
        )
      }
    }
  }
}