-
Notifications
You must be signed in to change notification settings - Fork 132
코드 가이드 ‐ Camera
malangfox edited this page Jan 16, 2025
·
1 revision
- Flicking 영역의 이동을 관리합니다.
- Anchor와 관련된 로직도 Camera 클래스에 포함되어 있습니다.
- Camera를 초기화하여 기본 상태를 설정합니다.
-
range
,anchors
,offset
,alignPos
등 Camera의 주요 속성을 업데이트합니다. - 필요에 따라 Viewport와 Panel의 정보를 Camera 동작에 반영합니다.
-
- Camera와 관련된 리소스 및 이벤트를 정리합니다.
- Camera가 사용 중인 이벤트 핸들러를 제거해서 메모리 누수를 방지합니다.
- Flicking 인스턴스 해제 시 호출됩니다.
- Camera의 현재 위치를 특정 좌표로 이동합니다.
- 전달된 좌표 값에 따라 Camera의 위치를 업데이트하고, 필요한 경우 애니메이션을 적용합니다.
- 범위를 벗어난 값이 들어오면
clampToReachablePosition
으로 조정합니다.
- Camera의 현재 위치 이전에 존재하는 가장 가까운 Anchor를 반환합니다.
- Anchor는 Panel의 시작 및 끝 위치로 정의됩니다.
- 위치 계산 시 현재 Camera 위치와 각 Anchor의 좌표를 비교합니다.
- Camera의 현재 위치 이후에 존재하는 가장 가까운 Anchor를 반환합니다.
- 다음 Anchor가 없으면 null을 반환하며, Loop 모드에서는 다시 첫 번째 Anchor를 참조합니다.
- 현재 Camera 위치를 기준으로, 특정 Panel 내에서의 상대적 진행률을 계산합니다.
- 0은 Panel의 시작, 1은 Panel의 끝을 의미하며, Panel의 크기와 위치를 기준으로 계산됩니다.
- 주어진 위치를 포함하는 Anchor를 반환합니다.
- Anchor의 범위(시작부터 끝까지) 안에 주어진 위치가 포함되어 있는지 확인합니다.
- Loop 모드에서는 Anchor의 좌표를 순환적으로 확인합니다.
- Camera의 현재 위치를 기준으로 가장 가까운 Anchor를 반환합니다.
- 모든 Anchor의 좌표를 순회하며 거리 차이를 계산하여 가장 가까운 Anchor를 선택합니다.
- 현재 Camera의 위치를 기준으로 활성 상태(현재 Viewport에서 보이는)인 Anchor를 반환합니다.
- 활성화된 Anchor는 Camera 위치와 가장 가까운 위치에 있습니다.
- 주어진 위치를 Camera가 이동 가능한 범위로 제한합니다.
-
range.min
과range.max
사이로 값을 제한하며, Loop 모드에서는 순환적인 좌표로 변환합니다.
-
- Camera가 특정 위치로 이동 가능한지 여부를 확인합니다.
- 주어진 위치가
range
내에 있는지 검사하여 불가능하면 false를 반환합니다.
- 주어진 위치가
- 특정 위치가 현재 Viewport 안에 보이는지 확인합니다.
- Viewport의 시작과 끝 좌표를 기준으로 해당 위치가 포함되어 있는지 판단합니다.
- Camera의 이동 가능한 범위를 계산하고 업데이트합니다.
- 현재 Panel과 Viewport의 크기 및 설정을 기반으로 최소 및 최대 범위를 정의합니다.
- Viewport 정렬 옵션(예: "center", "start")에 따라 Camera의 기준 위치를 업데이트합니다.
- 정렬 옵션에 따라 Camera의
alignPos
를 계산하고 저장합니다.
- 정렬 옵션에 따라 Camera의
- Panel 데이터를 기반으로 Anchor 정보를 갱신합니다.
- 각 Panel의 시작 및 끝 좌표를 계산하여 Anchor 배열에 저장합니다.
- Viewport의 높이를 현재 활성화된 Panel의 높이에 맞게 동적으로 조정합니다.
- Panel의 크기를 확인하고, Camera와 연결된 DOM 요소의 높이를 업데이트합니다.
- Camera의 기본 오프셋 값을 Viewport와 설정 값에 따라 갱신합니다.
- 오프셋은 Camera 이동 시 시작 좌표에 추가적으로 적용됩니다.
- Panel의 순서를 갱신하여 올바른 이동 동작을 보장합니다.
- circular 옵션이 활성화 상태라면 Panel의 배치를 조정합니다.
- Camera가 필요한 Panel 히스토리를 초기화합니다.
- Panel 추가/제거 등의 동작 이후 불필요한 상태를 초기화합니다.
- Camera의 현재 위치를 DOM 요소에 반영하여 실제 화면에서 이동 효과를 적용합니다.
-
transform
CSS 속성을 사용하여 Viewport의 렌더링을 업데이트합니다. - 애니메이션과 동기화하여 부드러운 이동을 보장합니다.
-