Jetpack Compose의 Canvas로 애니메이션 차트 만들기

Jetpack Compose의 Canvas를 사용하여 간단한 애니메이션 차트의 노트를 작성합니다.
아직 공부 중이니까 더 똑똑한 글쓰기 있으면 알려주세요.👍

Jetpack Compose에서 Canvas 활용

공식 문서

Canvas(modifier = Modifier.fillMaxSize()){
	drawRect(..)
	drawArc(..)
}

CanvasCompoosable 기능이 준비되어 있어 다른 Compoosable 기능과 동일하게 사용됩니다.DrawScope 공개된 그림 영역의 크기와 그리는 방법에 따라 두 번째 인자를 호출합니다.

막대그래프를 그리다

다음은 본론.일단 캔버스로 막대그래프를 그려보자.drawRect()를 사용하여 막대 그래프를 그립니다.이때 도표를 애니메이션화할 때 도표를 화면 아래에서 위로 뻗기 위해size의 y축에 마이너스 값을 지정하고 화면 위에 그리기(다른 좋은 방법이 있을지도 모른다).

@Composable
fun drawGraphSample(){
	val sampleValues = listOf(300f, 500f, 700f)

	Canvas(modifier = Modifier.fillMaxSize().padding(start = 32.dp, bottom = 32.dp)){
	    drawRect(
		topLeft = Offset(0f, size.height),
		color = Color.Red,
		size = Size(200f,　-sampleValues[0]),
	    )
	    drawRect(
		topLeft = Offset(250f, size.height),
		color = Color.Red,
		size = Size(200f, -sampleValues[1]),
	    )
	    drawRect(
		topLeft = Offset(500f, size.height),
		color = Color.Red,
		size = Size(200f, -sampleValues[2]),
	    )
	}
}

줄무늬 그림에 간단한 애니메이션을 첨부하다

아래 그림에서 보듯이 값은 0에서 1animateFloatAsState로 바뀌고 기둥 모양의 Y축을 이용하여 그리면 도표의 높이를 0%에서 100%로 바꿀 수 있다.
공식 문서

@Composable
fun drawGraphSample(){
        val animationFlag = remember { mutableStateOf(false)}
        val animateHeight by animateFloatAsState(if (animationFlag.value)  1f else 0f)
        val sampleValues = listOf(300f, 500f, 700f)

        Canvas(modifier = Modifier.fillMaxSize()){
            animationFlag.value = true
            drawRect(
                topLeft = Offset(0f, size.height),
                color = Color.Red,
                size = Size(200f, animateHeight * -sampleValues[0]),
            )
            drawRect(
                topLeft = Offset(250f, size.height),
                color = Color.Red,
                size = Size(200f, animateHeight * -sampleValues[1]),
            )
            drawRect(
                topLeft = Offset(500f, size.height),
                color = Color.Red,
                size = Size(200f, animateHeight * -sampleValues[2]),
            )
        }
}

또한 지정animationSpec을 통해 애니메이션의 규격을 변경할 수 있다.

val animateHeight by animateFloatAsState(
    targetValue = if (animationFlag.value)  1f else 0f,
    animationSpec = tween(durationMillis = 500, easing = FastOutSlowInEasing)
)

끝맺다

Canvas는 다른 Compoosable 기능animate*AsState을 사용하여 애니메이션을 간단하게 만들 수도 있습니다.
또한 도표의 색깔과 너비도 똑같이 애니메이션화할 수 있으니 앞으로 한번 시도해 보고 싶습니다.