class MainActivity : ComponentActivity() { overrider fun onCreate(savedInstanceState: Bundle?){ super.onCreate(saveInstanceState) setContent { MaterialTheme { AnimatedBoxExample() } } } @Composable fun AnimatedBoxExample() { var expaned by remember {mutableStateOf(false)} val boxSize by animateDpAsState( targetValue = if(expanded) 200.dp else 100.dp, label ="BoxSizeAnimation" ) Column( modifier = Modifier .fillMaxSize() .padding(32.dp), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { Box( modifier = Modifier .size(boxSize) .padding(8.dp), contentAlignment = Alignment.Center ) { color = MaterialTheme.colorScheme.primary, modifier = Modifier.fillMaxSize() } {} } Spacer(modifier = Modifier.height(16.dp)) Button(onClick= {expanded = !expanded}) { Text(text =if (expanded) "縮小する" else "拡大する") } } }
animateDpAsState:Dp 値を滑らかにアニメーションさせます。
targetValue:アニメーションで変化させたい目標値。
expanded を切り替えることで、Boxのサイズが 100.dp ↔ 200.dp にアニメーション付きで変化。