[FEAT/#133] Designsystem / Custom CircularIndicator 제작

[TaewoongR]

• closed #133

📍 Work Description

• 커스텀 원형 인디케이터 제작

📸 Screenshot

https://github.com/user-attachments/assets/28bebd9d-583b-42b5-9000-38ecb33a3ef0

📢 To Reviewers

• Material 의 인디케이터처럼 인자 추가 없이 생으로 쓰셔도 됩니다.

• 사이즈, 색상, 두께, 회전 속도, 선 끝의 모양 설정이 가능합니다.

• StrokeCap.Butt 은 선 끝이 Butt 평평하게 각진 모양입니다.

• InfiniteTransition 타입의 animateFloat 확장함수를 사용하여 initialValue 부터 targetValue 까지 float 타입의 숫자 범위를 durationMillis 동안 주기적으로 도달하는 끝없는 transition 을 정의한다.

  • 이 함수는 단순히 숫자만을 반복하게 정의하는 함수다.

• canvas 의 drawArc 함수 내부에 그리는 시점 속성(startAngle) 에 변화되는 transition 을 대입하여 회전하는 애니메이션 효과를 부여한다.

Compose phases and performance

• 인디케이터가 계속 실행될 때 리컴포지션이 될 줄 알았는데 에뮬레이터의 layout inspector를 확인한 결과 리컴포지션이 일어나고 있지 않았다.
• 확인 결과 draw 와 composition 의 차이를 알게 되었고, 추가적인 element가 없다면 recomposition 은 일어나지 않고 redraw 만 일어나고 한다.

⏲️Time

- 1.5 시간

[TaewoongR]

애니메이션을 사용하는 컴포넌트까지... 초고수

블로그 카피닌자입니다