[Flutter] 다음웹툰 Interaction 따라하기...(2)

LOCKED·2021년 5월 26일

이번 포스트는 지난 다음웹툰 interaction(1)에 이어서 작성한다.

리마인드

지난 시간 마름모 <-> 사각형의 변화를 만들었다.

목표

이번시간에는 N로고를 만들어볼 것이다.

구현 내용

위에도 설명했듯이 이번시간에는 다음 웹툰 메인에 떠있는 N로고를 만들 것이다.
현재 만들어본 도형은 마름모와 사각형 두개이고, 컨트롤할 수 있는 선분은 4개이다.
실제 다음 웹툰처럼 여러 도형을 만들기 전에 선분 4개로 만들 수 있는 기본적인 도형들에 대해서만 구현해보려한다.

N 로고

N로고는 3개의 선분으로 이루어져있다.
하지만, 위의 이미지에서도 알 수 있듯이 다음 웹툰에서는 해당 도형을 4개의 선분으로 구현하였다.

개발

N로고를 그리기 위해서는 지난 시간과는 좀 다른 코드를 적용해야 할 것 같다.
그 이유는, 지난 시간드의 도형은 한붓그리기가 가능한 도형으로 path.lineTo함수만 사용하여 그릴 수 있었다.

하지만 이번에는 각 선분마다 위치를 변경하여 그리려 한다.
0~1일때는 사각형, 1~2 마름모, 2~3일때는 N로고를 보여주려한다.

좀 더 복잡한 도형이 올 경우에는 위치에 대한 수식을 적용하기 까다로울 것이다.

코드

// 첫 번째 선분
path.moveTo(0 + (size.width / 2 * _value), -gap);
path.lineTo(size.width + gap, 0 + (size.height / 2 * _value));

// 두 번째 선분
path.moveTo(size.width + gap, 0 + (size.height / 2 * _value));
path.lineTo(size.width - (size.width / 2 * _value),
    size.height - moveValue * size.height + gap);

// 세 번째 선분
path.moveTo(size.width - (size.width / 2 * _value), size.height + gap);
path.lineTo(-gap, size.height - (size.height / 2 * _value));

// 네 번째 선분
path.moveTo(-gap, size.height - (size.height / 2 * _value));
path.lineTo(0 + (size.width / 2 * _value), -gap + moveValue * size.height);