[Jetpack Compose] Fadeアニメーションを入れたモーダル表示

@Composable
private fun MyFadeView() {
	var isShowFadeAnimationModal by remember { mutableStateOf(false) }

	Box(
		modifier = Modifier.fillMaxSize(),
		Alignment.Center
	) {
		Button(
			modifier = Modifier
				.width(320.dp)
				.height(48.dp),
			onClick = { isShowFadeAnimationModal = true }
		) {
			Text(text = "Show Fade Animation Modal View")
		}
	}

	if (isShowFadeAnimationModal) {
		ModalView {
			isShowFadeAnimationModal = false
		}
	}
}

@Composable
private fun ModalView(onDismiss: () -> Unit) {
	Dialog(
		onDismissRequest = onDismiss
	) {
		AnimatedVisibility(
			visible = true,
			enter = fadeIn(),
			exit = fadeOut()
		) {
			Box(
				modifier = Modifier
					.width(480.dp)
					.height(600.dp)
					.clip(RoundedCornerShape(16.dp))
					.background(Color.White),
				Alignment.Center
			) {
				Column(
					modifier = Modifier.padding(12.dp),
					horizontalAlignment = Alignment.CenterHorizontally
				) {
					Text("Hello Animation Dialog")
					Box(
						modifier = Modifier
							.width(200.dp)
							.height(200.dp),
						Alignment.Center
					) {
						Image(
							painterResource(id = R.drawable.cuteboy), contentDescription = "Cute Dog"
						)
					}
					Button(onClick = onDismiss) {
						Text(text = "CLOSE")
					}
				}
			}
		}
	}
}