@Composable
fun AnimationEx() {
  var helloWorldVisible by remember { mutableStateOf(true) }
  var isRed by remember { mutableStateOf(false) }

  val backgroundColor by animateColorAsState(
    targetValue = if (isRed) Color.Red else Color.White,
    label = "AnimateColorAsState"
  )

  val alpha by animateFloatAsState(
    targetValue = if (isRed) 1.0f else 0.5f,
    label = ""
  )

  Column(
    modifier = Modifier
      .padding(16.dp)
      .background(backgroundColor)
      .alpha(alpha)
  ) {

    AnimatedVisibility(
      visible = helloWorldVisible,
      enter = fadeIn() + expandHorizontally(), // expandHorizontally, expandVertically, slideIn~~ 등
                                              // 단독 사용 가능, + 연산으로 동시 사용 가능
      exit = slideOutHorizontally()
    ) {
      Text(text = "Hello World!")
    }
    
    Row(
      Modifier.selectable(
        selected = helloWorldVisible,
        onClick = {
          helloWorldVisible = true
        }
      ),
      verticalAlignment = Alignment.CenterVertically
    ) {
      RadioButton(
        selected = helloWorldVisible,
        onClick = { helloWorldVisible = true }
      )
      Text(
        text = "Hello World 보이기"
      )
    }

    Row(
      Modifier.selectable(
        selected = !helloWorldVisible,
        onClick = {
          helloWorldVisible = false
        }
      ),
      verticalAlignment = Alignment.CenterVertically
    ) {
      RadioButton(
        selected = !helloWorldVisible,
        onClick = { helloWorldVisible = false }
      )
      Text(
        text = "Hello World 감추기"
      )
    }

    Text(text = "배경 색을 바꾸어봅시다.")

    Row(
      Modifier.selectable(
        selected = !isRed,
        onClick = {
          isRed = false
        }
      ),
      verticalAlignment = Alignment.CenterVertically
    ) {
      RadioButton(
        selected = !isRed,
        onClick = { isRed = false }
      )
      Text(
        text = "흰색"
      )
    }

    Row(
      Modifier.selectable(
        selected = isRed,
        onClick = {
          isRed = true
        }
      ),
      verticalAlignment = Alignment.CenterVertically
    ) {
      RadioButton(
        selected = isRed,
        onClick = { isRed = true }
      )
      Text(
        text = "빨간색"
      )
    }
  }
}

Crossfade

@Composable
fun Animation2Ex() {
  var isDarkMode by remember { mutableStateOf(false) }

  // 단계 1: `updateTransition` 수행하고 `targetState`를 `isDarkMode`로
  // 설정합니다. `transition`으로 리턴을 받습니다.
  val transiton = updateTransition(targetState = isDarkMode, label = "Transition")

  // 단계 2: `transition`에 대해 `animateColor`를 호출해 `backgroundColor`를 받습니다.
  // 배경색상을 만듭시다. false일 때 하얀 배경, true일 때 검은 배경.
  val backgroundColor by transiton.animateColor(label = "Dark mode background animation") { state ->
    when (state) {
      true -> Color.Black
      false -> Color.White
    }
  }

  // 단계 3: 글자 색상을 만듭시다.
  val color by transiton.animateColor(label = "Dark mode text color") { state ->
    when (state) {
      true -> Color.White
      false -> Color.Black
    }
  }

  // 단계 4: `animateFloat`를 호출해서 알파 값을 만듭시다.
  val alpha by transiton.animateFloat(label = "Dark mode alpha animation") { state ->
    when (state) {
      true -> 1f
      false -> 0.7f
    }
  }

  // 단계 5: 컬럼에 배경과 알파를 적용합시다.
  Column(
    modifier = Modifier
      .fillMaxSize()
      .background(backgroundColor)
      .alpha(alpha)
  ) {
    // 단계 6: 라디오 버튼에 글자 색을 적용합시다.
    RadioButtonWithText(text = "일반 모드", color = color, selected = !isDarkMode) {
      isDarkMode = false
    }
    RadioButtonWithText(text = "다크 모드", color = color, selected = isDarkMode) {
      isDarkMode = true
    }

    // 단계 7: Crossfade를 이용해 `isDarkMode`가 참일 경우
    // `Row`로 항목을 표현하고 거짓일 경우 `Column`으로 표현해봅시다.
    // Crossfade: 전환되는 과정에서 애니메이션
    Crossfade(targetState = isDarkMode, label = "") { state ->
      when (state) {
        false -> {
          Column {
            Box(
              modifier = Modifier
                .background(Color.Red)
                .size(20.dp)
            ) {
              Text("1")
            }
            Box(
              modifier = Modifier
                .background(Color.Magenta)
                .size(20.dp)
            ) {
              Text("2")
            }
            Box(
              modifier = Modifier
                .background(Color.Blue)
                .size(20.dp)
            ) {


              Text("3")
            }
          }
        }

        true -> {
          Row {
            Box(
              modifier = Modifier
                .background(Color.Red)
                .size(20.dp)
            ) {
              Text("a")
            }
            Box(
              modifier = Modifier
                .background(Color.Magenta)
                .size(20.dp)
            ) {
              Text("b")
            }
            Box(
              modifier = Modifier
                .background(Color.Blue)
                .size(20.dp)
            ) {
              Text("c")
            }
          }
        }
      }
    }
  }
}

@Composable
fun RadioButtonWithText(
  text: String,
  color: Color = Color.Black,
  selected: Boolean,
  onClick: () -> Unit
) {
  Row(
    modifier = Modifier.selectable(
      selected = selected,
      onClick = onClick
    ),
    verticalAlignment = Alignment.CenterVertically
  ) {
    RadioButton(selected = selected, onClick = onClick)
    Text(text = text, color = color)
  }
}

• 일반모드
  

• 다크모드