Android Compose AnimatedVisibility 애니메이션 활용

Compose에서 간단한 애니메이션 을 제공해주는 뷰가 있습니다.

 

AnimatedVisibility 라는 View인데 현재는 좌,우,위,아래 방향으로 슬라이딩 형식의 애니메이션을 제공해줍니다.

 

사용방법도 간단합니다.

 

AnimatedVisibility(
    visible = viewEnable.value ,
    modifier = modifier,
    enter = slideInVertically(initialOffsetY = {
        +it
    }),
    exit = slideOutVertically(targetOffsetY = {
        +it
    })
){
    
}

 

visible = 기존 VISIBLE , GONE 생각하시면 될거같습니다.

true 이면 보여지고 , false 이면 감춰집니다

 

enter = 뷰가 보여질때 애니메이션 방향을 가르킵니다.

-it , +it 로 조절 이됩니다.

 

exit = 뷰가 감춰질때 애니메이션 방향을 가르킵니다.

-it , +it 로 조절 이됩니다.

 

해당 애니메이션 뷰를 통해 간단한 UI를 그려보겠습니다.

 

@Composable
fun BottomPopup(modifier: Modifier, isEnable: MutableState<Boolean>, onDismiss: () -> Unit){
    val viewEnable = remember { mutableStateOf(false) }
    var imageBitmap by remember { mutableStateOf<Painter?>(null) }


    if(isEnable.value){
        GlideImage(
            imageModel = {
                ""
            },
            success = { state,painter ->
                imageBitmap = painter
                viewEnable.value = true
            }
        )
    }


    AnimatedVisibility(
        visible = viewEnable.value ,
        modifier = modifier,
        enter = slideInVertically(initialOffsetY = {
            +it
        }),
        exit = slideOutVertically(targetOffsetY = {
            +it
        })
    ) {
        Column() {
            Card(
                shape = RoundedCornerShape(topEnd = 20.dp , topStart = 20.dp)
            ) {
                imageBitmap?.let {
                    Image(
                        painter = it,
                        contentDescription = "dsa",
                        modifier = Modifier
                            .fillMaxWidth()
                            .heightIn(max = 200.dp),
                        contentScale = ContentScale.Crop
                    )
                }

                Row (modifier = Modifier.fillMaxWidth()){
                    Column(
                        modifier = Modifier
                            .weight(1f)
                            .background(Color.White)
                            .clickable {
                                viewEnable.value = false
                                onDismiss()
                            },
                        horizontalAlignment = Alignment.CenterHorizontally,

                        ) {
                        Text(
                            text = "버튼1" ,
                            modifier = Modifier.padding(top = 20.dp , bottom = 20.dp)
                        )
                    }
                    Column(
                        modifier = Modifier
                            .weight(1f)
                            .background(Color.White),
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        Text(text = "버튼2" , modifier = Modifier.padding(top = 20.dp , bottom = 20.dp))
                    }
                }
            }

        }
    }


}

 

 

적용했을때의 애니메이션 효과입니다.

 

적은 코드로도 쉽게 애니메이션을 구현할수 있습니다.

 

감사합니다.