[Flutter] 3일 지난 인스타 피드

LOCKED·2022년 1월 13일
47
post-thumbnail

아무 생각없이 인스타를 내리다보면 아래 이미지와 같은 화면을 볼 수 있다.
새로 올라온 글을 다 읽었단 의미를 가지고 있다.

인스타를 사용하다 보면 가끔 보이는 인터랙션이긴 했는데, 애니메이션도 빠르게 진행되서 주의깊게 본적이 없을 수도 있다.
그래서 느린 화면을 준비해봤다. 느리게 보면 아래와 같다.

애니메이션은 다음과 같은 순서로 동작한다.

  1. 먼저 원이 점차 커지며, 선이 얇아진다.
  2. 체크 표시가 그려진다.

위의 애니메이션을 구현하기 위해서는 어떻게 해야할까?
애니메이션을 디자이너분께서 구현하신다음 asset을 준다면 더할 나위 없이 좋겠지만, 인스타의 경우처럼 간단한하다면 직접 만들어보는 경험도 필요하다고 생각한다.

그렇다면 위의 애니메이션을 구현하는 방법에는 어떤 것들이 있을까?
.gif, lottie, paint 등 여러 방법이 있겠지만, 개발자가 이미지 asset으로 만들기 힘드니 paint를 활용하여 만드는 방법을 소개하려한다.

Paint Animation

Android에서도 동일하게 사용되는 Canvas에 그림을 그리는 방법인데, 이를 활용하여 애니메이션을 만들어 보자.

Android에서의 Canvas 관련 코드는 Flutter에서 거의 그대로 쓸 수 있다.

먼저 애니메이션이 완료된, 우리가 목표한 완료시점의 모습을 그려보자.

완료 시점의 원 그리기

비교적 쉬워보이는 원부터 진행하려 한다. canvas에 원을 그리는 방법은 간단하다.
drawCircle을 이용하면 원이 생성된다. 이 때, paint 속성 중 하나인 PintingStyle을 설정하여 테두리만 그리도록 설정한다.

canvas.drawCircle(offset, radius, paint);

완료 시점의 체크 그리기

체크 아이콘을 그리기 위해서는 적당한 좌표를 찾는 것이 필요하다.
내 경우, 아래와 같은 값으로 설정했다.

Offset startPoint = Offset(width * 0.23, height * 0.5);
Offset centerPoint = Offset(width * 0.43, height * 0.7);
Offset endPoint = Offset(width * 0.75, height * 0.35);

애니메이션 적용하기

원과 체크 아이콘을 그리니, 인스타의 모습과 비슷해 보인다.
하지만, 애니메이션이 없어 어딘가 허전한 느낌을 떨쳐낼 수 없다.

애니매이션을 적용하기 위해서는 어떻게 해야할까?

먼저, 애니메이션은 크게는 2가지로 나눈다.
1. 원의 크기 변경 --- (a)
2. 체크 아이콘 생성 --- (b)

애니매이션을 적용하기 위해서 AnimatedBuilder 위젯을 사용한다.

...
AnimatedBuilder(
  animation: animation,
  builder: (context, child) {
    return CustomPaint(
      painter: InstaPainter(animation.value),
      child: child,
    );
  },
  ...
),

이제 애니메이션에 필요한 값을 Painter로 넘겨주고,
Painter에서 0~1의 값을 가지고 (a, b) 를 나눠 구현하면 된다.

나는 animation Value를 나눠 애니메이션을 세부분할한다.
0~0.5까지는 원을 그리도록 하였고, 0.5~1까지는 체크 아이콘을 그렸다.

원 애니메이션 (a)

paint..strokeWidth = 6 + max((1 - (animationValue) * 2) * 30, 0)
...
canvas.drawCircle(
  Offset(
	width / 2,
    height / 2,
  ),
  1 + min(animationValue * width, width / 2),
  paint,
);

paint의 두께와 원의 radius를 적절히 설정하여 원의 움직임을 구현하였다.

체크 애니메이션 (b)

원의 애니메이션과 비슷하게, 영역을 설정하고 해당 animation 값에 따라 그려질 직선에 대한 수식을 사용하면 된다.

직선이여서 크게 어렵지 않게 진행할 수 있다.

결과


간단한 원과 직선이여서 인스타에서 보던 애니메이션을 비교적 쉽게 구현할 수 있었다. 좀 더 어려운 도형이 나온다면 어떻게 해야할지 생각해 봐야할 것 같다.

profile
Flutter 개발자 :'>

6개의 댓글

comment-user-thumbnail
2022년 1월 17일

이번에도 잘 보고 갑니다!! 별 생각없이 넘겼던 애니메이션인데 구현 과정을 보는것도 재밌네요.ㅎㅎ

1개의 답글
comment-user-thumbnail
2022년 1월 21일

플러터.... 넘나 매력적인 것. 잘 보고 갑니다!

1개의 답글