Android Weekly #-588 "Compose로 border의 애니메이션 간지나게 만들기"

9월 3주차에는 UI 컴포넌트의 워크플로우 최적화 방법(치수의 시각화 Blueprint 라이브러리) 글도 매우 중요하고 실용적인 글이라 생각해 2개 작성하겠습니다.

 

https://ruthwikkk.medium.com/animate-borders-in-jetpack-compose-ca359deed7d5

Animate borders in Jetpack Compose

 

 

(간지 미쳤다)

 

 

소개 

 

Jetpack Compose를 사용하여 그라디언트 테두리 애니메이션을 어떻게 만드는지에 대한 디테일한 설명과 가이드를 설명해줍니다.

 

 

 

내용(링크 세부 코드 참조)

 

• 먼저, 라운드된 모서리를 가진 사각형 모양을 만드는 것부터 시작합니다. 이를 위해 라운드된 모양을 그린 다음, 그 위에 다른 색의 라운드된 모양을 그려 테두리 효과를 만듭니다.
• 이어서, 외부 사각형에 그라디언트를 적용하는 단계를 설명합니다. 여기서 그라디언트 브러시를 사용하여 다양한 색상 간의 부드러운 전환 효과를 만들어냅니다.
• 그라디언트의 애니메이션 효과를 추가하는 부분에서는 회전하는 그라디언트 채우기 기법을 활용하여 동적인 애니메이션 효과를 만들어냅니다. 이 때 animateFloat() 및 rotate() 함수를 사용하여 회전 애니메이션을 적용합니다.
• 마지막으로, 이 기법을 활용하여 실제 애플리케이션에서 사용될 수 있는 사용자 정의 카드 컴포넌트를 만드는 과정을 설명합니다. 여기서 그라디언트 애니메이션 테두리를 가진 카드 컴포넌트를 생성하며, 이 컴포넌트는 클릭 이벤트나 다양한 컨텐츠를 포함할 수 있습니다.

 

@Composable
fun CardWithAnimatedBorder(
    modifier: Modifier = Modifier,
    onCardClick: () -> Unit = {},
    borderColors: List<Color> = emptyList(),
    content: @Composable () -> Unit
) {
    val infiniteTransition = rememberInfiniteTransition()
    val angle by
        infiniteTransition.animateFloat(
            initialValue = 0f,
            targetValue = 360f,
            animationSpec =
                infiniteRepeatable(
                    animation = tween(1500, easing = LinearEasing),
                    repeatMode = RepeatMode.Restart
                )
        )

    val brush =
        if (borderColors.isNotEmpty()) Brush.sweepGradient(borderColors)
        else Brush.sweepGradient(listOf(Color.Gray, Color.White))

    Surface(modifier = modifier.clickable { onCardClick() }, shape = RoundedCornerShape(20.dp)) {
        Surface(
            modifier =
                Modifier.clipToBounds().fillMaxWidth().padding(1.dp).drawWithContent {
                    rotate(angle) {
                        drawCircle(
                            brush = brush,
                            radius = size.width,
                            blendMode = BlendMode.SrcIn,
                        )
                    }
                    drawContent()
                },
            color = HushTheme.colors.backgroundColors.backgroundGlassPrimary,
            shape = RoundedCornerShape(19.dp)
        ) {
            Box(modifier = Modifier.padding(8.dp)) { content() }
        }
    }
}

 

정리

 

저는 다양한 기술을 사용해보는 경험은 가져봤지만, 완벽에 가까운(?) 혹은 간지나는(?) UI를 만들어 본적은 없습니다.
마지막에 나온 Composable을 이용해서 내부 값을 바꿔 꼭 간지나는 버튼들의 테두리.... 유용할것 같습니다.

https://androidweekly.net/

Android Weekly - Free weekly Android & Kotlin development newsletter