Blob Animation in Flutter

🎨 What I Designed

https://github.com/suojae/flutter_ui_lab/blob/main/lib/2025/01/30.dart

flutter_ui_lab/lib/2025/01/30.dart at main · suojae/flutter_ui_lab

---

🔎  How I Made It

애니메이션 구현 순서

1. 먼저 원의 중심을 설정한다.

2. 원 테두리를 이루는 점을 설정한다.

3. 테두리에 있는 점들의 각도 차이를 계산한다.

4. Blob의 기본 반지름을 설정한다.

5. 테두리의 점들을 출렁이게한다. (Sin함수 이용)

6. 출렁이면서 변하는 새로운 반지름을 계산하여 각점에 적용한다.

7. 각 점들의 위치를 계산한다.

8. 변하는 점들의 위치를 Bezier곡선으로 점을 연결한다.

9. AnimationController로 감싸서 값이 변경될때마다 애니메이션이 적용되게한다.

 

각 단계별로 좀더 자세히 알아보자

 

📌  먼저 원의 중심과 원 테두리를 이루는 점 개수를 설정한다

원의 중심 좌표를 설정하여 Blob의 중심이 고정되도록 한다.

 

📌  각 점들의 각도 차이를 계산한다.

왜 위 수식이 각 점들의 각도차이일까? 먼저 2.0 * π 는 360도를 나타내고 pointCount는 원테두리의 총 개수를 나타낸다. 한바퀴 도는 각도에 원테두리에 있는 각 점들이 균등하게 배치되려면 2π / 점 개수만큼 간격을 두고 배치해야한다. 그래서 각 점간의 각도차이가 위와 같은 수식이된다.

 

📌  Blob의 기본 반지름을 설정한다

여기서 BaseRaduys는 출렁이기전 Blob이 기본적으로 유지하는 반지름을 나타낸다. 전체화면 너비의 0.35로 잡았다.  이게 이 기본 반지름을 중심으로 amplitude가 더해지고 빼지면서 반지름이 변하면서 출렁이게된다.

 

📌  For문을 돌려 Blob점 좌표를 계산한다

이제 Blob의 중심, 각도, 반지름이 셋팅되었으니 테두리의 점들부터 배치해서 Blob의 기초형태를 그려준다. 이때 cos과 sin을 통해 각 테두리 점의 좌표를 찍어준다. (즉 삼각함수를 통해 원 테두리 점들의 좌표를 찍어준다) 테두리 점의 개수만큼 for문을 돌리고 좌표값을 계산해서 해당 좌표에 point.add() 로 점의 x좌표와 y좌표 튜플을 배열에 저장한다.

 

이때 테두리 점들의 위치를 움직여 출렁이게 하기위해 생성자에서 값을 받게되는데 외부에서 AnimatinoController를 통해  0 → 1 → 0을 반복하면서 변하는 값을 주입하게 된다. 따라서 value * 2 * pi 는 0 ~ 1을 0 ~ 2π로 변환하면서 하나의 애니메이션 사이클이 만들어진다. 

 

https://study-all-night.tistory.com/102

(왜 삼각함수가 원의 좌표인지까지인지 담으면 너무 글이 길어질까봐 생략 고등학교 수학을 복습해보자) 

 

이때 rawOffset 계산하는 코드에서 i를 더하는 것을 볼 수 있는데 이게 진짜 중요하다.  i가 없으면 모든점의 sin값이 동일해서 모든 점들이 그냥 동시에 같은 크기로 커지고 동시에 줄어들기만 해서 출렁거리지가 않는다.

 

        ╭───●───╮
      ●         ●
    ●             ●
   ●               ●  ⬅ 각 점을 부드러운 곡선으로 연결
    ●             ●
      ●         ●
        ╰───●───╯

이걸 이해하기 쉽게 표현하면 For문 하나 돌때마다 테두리의 점 하나를 찍는거라고 생각하면 된다. i를 더하지않으면 단순히 각도만 다른채로 배치가 되고 출렁임 없이 커졌다 작아졌다만 Sin함수에 따라 움직이게 된다. 그래서 점의 위치를 다채롭게 주기위해 점이 18개인 경우 sin(0~17)을  각 점의 반지름마다 더해주어 점들을 배치한뒤 곡선으로 연결해서 출렁이게한다.

 

📌  원 테두리 점의 위치가 셋팅되었으면 Path를 통해 Blob을 그린다.

이제 튜플로 저장된 점들의 위치를 꺼내와 실제로 선을 이어준다. 첫번째 좌표(points[0].dx, dy)부터 시작해서 for문을 돌려 한 바퀴 삥그르를 점들을 이어준다.

 

이때 각 점들을 부드럽게 이어주는게 포인트인데 여기서 베지어 곡선이 사용된다.

 

 

 

 

📌  Point[0] 과 Point[1] 의 곡선처리로 마무리