01_ShapeGeometry 를 이용한 카드의 곡선표현
absarc 앱솔루트아크 메소드
border-radius 와 비슷한 개념
absarc 는 총 여섯개의 인자를 받을 수 있다.
radius인 border-radius 가 있는 직사각형을 표현하기 위해서 반시계 혹은 시계방향으로 회전한 만큼을 생각하면 된다.
startAngle, endAngle 은 각각 부채꼴 중심각의 시작, 끝 각도를 의미하며,
clockwise 는 시계방향으로 꺾을지, 반시계로 꺾을지 정하는 값을 받는다.
위 그림과 설명을 토대로 곡선이 있는 부드러운 카드를 만든다면
우측상단의 곡선
- 회전의 중심점 x,y 좌표를 구한다.
- 전체카드 width의 절반값에서 radius 를 뺀 값이 x 좌표가 된다.
- 전체카드 height 의 절반값에서 radius 를 뺀 값이 y 좌표가 된다.
- 회전각의 시작과 끝값을 정해준다.
- x 축 양의방향을 기준으로 90도에서 0도 방향으로, 시계방향으로 회전시킨다.
- 이때 각도가 아닌, 파이 형식으로 넣어줘야 하기 때문에 90도는 Math.PI 를 2로 나눈값이되고 0은 그냥 0 처리 한다.
- 첫번째 부채꼴이 끝나는 시점부터 그다음 부채꼴이 시작되는 지점까지의 직선길이를 구하려면 radius 의 길이를 뺀 나머지가 되어야 한다.
- 우측하단의 x 값은 방금 계산한 x 값에 radius 를 더한값이 되고, y 값은 방금 계산한 y값의 부호만 반대로 설정해주면 된다.
- 길이를 구했으니 부채꼴의 중심점을 알아내어 x,y 좌표를 구해야 한다.
- 이전과 x 좌표는 똑같고, y 좌표는 부호만 반대로 하여 -y가 된다.
- 회전의 시작과 끝 각도는 0도에서 -90도인 시계방향으로 진행된다.
이런식으로 나머지 부분도 계산한다면 다음과 같이 최종 코드가 작성된다.
02_카드의 두께감 표현하기
ExtrudeGeometry
shapeGeometry 는 두께감을 표현하지 못하기 때문에 ExtrudeGeometry 를 대신 이용할 수 있다.
앞서 설정한 shape 인스턴스를 인자로 받을 수 있고 다양한 속성들을 두번째 인자로 설정할 수 있다.
ExtrudeGeometry 를 사용했을때 최대로 확대해보면 여러개의 경계면이 있는것을 볼 수 있다.
이러한 경사진면의 두께를 더 부드럽게 표현하기 위해서 TextGeometry에서 다뤘던 bevel 옵션을 사용할 수 있다.
03_카드 애니메이션 구현하기
gsap