Camera
class Camera
뷰포트 내에서의 실제 움직임을 담당하는 컴포넌트
constructor
new Camera(flicking, )
| PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
|---|---|---|---|---|
| flicking | Flicking | |||
| Partial<CameraOptions> | ✔️ | {} |
Properties
element
카메라 엘리먼트(.flicking-camera)
Type: HTMLElement
children
카메라 엘리먼트(.flicking-camera)의 자식 엘리먼트 배열
Type: Array<HTMLElement>
position
Camera의 현재 좌표
Type: number
alignPosition
패널의 정렬 기준 위치. 뷰포트 내에서 Panel의 alignPosition이 위치해야 하는 곳입니다
Type: number
offset
Camera의 좌표 오프셋. renderOnlyVisible 옵션을 위해 사용됩니다.
Type: number
Default: 0
circularEnabled
circular 옵션이 활성화되었는지 여부를 나타내는 멤버 변수.
circular 옵션은 패널의 크기의 합이 충분하지 않을 경우 비활성화됩니다.
Type: boolean
Default: false
mode
A current camera mode
Type: CameraMode
range
Camera의 position이 도달 가능한 범위
Type: object
| PROPERTY | TYPE | DESCRIPTION |
|---|---|---|
| min | number | 최소 위치 |
| max | number | 최대 위치 |
rangeDiff
Camera가 도달 가능한 최소/최대 좌표의 차이
Type: number
visiblePanels
현재 보이는 패널들의 배열
Type: Array<Panel>
visibleRange
현재 위치에서 보이는 범위
Type: object
| PROPERTY | TYPE | DESCRIPTION |
|---|---|---|
| min | number | 최소 위치 |
| min | number | 최대 위치 |
anchorPoints
카메라가 도달 가능한 AnchorPoint의 목록
Type: Array<AnchorPoint>
controlParams
AxesController를 업데이트하기 위한 현재 Camera 패러미터들
Type: ControlParams
atEdge
현재 카메라가 도달 가능한 범위의 최소 혹은 최대점을 넘어섰는지를 나타냅니다
Type: boolean
size
뷰포트 크기를 반환합니다
Type: number
progress
첫번째 패널로부터 마지막 패널까지의 카메라 위치의 진행도를 반환합니다
범위는 0부터 마지막 패널의 인덱스까지입니다
Type: number
panelOrder
카메라 엘리먼트(.flicking-camera)에 적용된 direction CSS 속성
Type: string
align
alignPosition이 뷰포트 엘리먼트 내의 어디에 위치해야 하는지를 나타내는 값
Type: ALIGN | string | number
Methods
init
Camera를 초기화합니다
Returns: this
Throws: FlickingError
VAL_MUST_NOT_NULL 뷰포트 엘리먼트 내부에 카메라 엘리먼트(.flicking-camera)가 존재하지 않을 경우
destroy
Camera를 초기 상태로 되돌립니다
Returns: void
lookAt
해당 좌표로 이동하고, CSS transform을 적용합니다
Returns: this
| PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
|---|---|---|---|---|
| pos | number | 움직일 위치 |
Throws: FlickingError
NOT_ATTACHED_TO_FLICKING init이 이전에 호출되지 않은 경우
getPrevAnchor
주어진 AnchorPoint의 이전 AnchorPoint를 반환합니다
존재하지 않을 경우 null을 반환합니다
Returns: AnchorPoint | null
- 이전 AnchorPoint
| PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
|---|---|---|---|---|
| anchor | AnchorPoint | 기준 AnchorPoint |
getNextAnchor
주어진 AnchorPoint의 다음 AnchorPoint를 반환합니다
존재하지 않을 경우 null을 반환합니다
Returns: AnchorPoint | null
- 다음 AnchorPoint
| PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
|---|---|---|---|---|
| anchor | AnchorPoint | 기준 AnchorPoint |
getProgressInPanel
현재 카메라 아래 패널에서의 위치 진행도를 반환합니다
반환값은 카메라가 패널 내부에 있을 경우 0부터 1까지의 값을 갖습니다
패널의 margin 영역에 있을 경우 0보다 작거나 1보다 큰 값을 반환할 수 있습니다
| PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
|---|---|---|---|---|
| panel | Panel |
findAnchorIncludePosition
주어진 좌표를 포함하는 AnchorPoint를 반환합니다
주어진 좌표를 포함하는 AnchorPoint가 없을 경우 null을 반환합니다
Returns: AnchorPoint | null
- 해당 좌표를 포함하는 AnchorPoint
| PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
|---|---|---|---|---|
| position | number | 확인할 좌표 |
findNearestAnchor
해당 좌표에서 가장 가까운 AnchorPoint를 반환합니다
AnchorPoint가 하나도 없을 경우 null을 반환합니다
Returns: AnchorPoint | null
- 해당 좌표에 가장 인접한 AnchorPoint
| PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
|---|---|---|---|---|
| position | number | 확인할 좌표 |
findActiveAnchor
현재 Flicking#currentPanel에 해당하는 AnchorPoint를 반환합니다
Returns: AnchorPoint | null
clampToReachablePosition
주어진 좌표를 Camera가 도달 가능한 범위 사이의 값으로 만듭니다
Returns: number
- 범위 제한된 좌표
| PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
|---|---|---|---|---|
| position | number | 범위를 제한할 좌표 |
canReach
해당 Panel이 Camera가 도달 가능한 범위 내에 있는지를 반환합니다
Returns: boolean
- 도달 가능한 범위 내에 해당 패널이 존재하는지 여부
| PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
|---|---|---|---|---|
| panel | Panel | 확인할 Panel의 인스턴스 |
canSee
현재 좌표에서 해당 패널 엘리먼트를 볼 수 있는지 여부를 반환합니다
Returns: boolean
- 현재 위치에서 해당 패널 엘리먼트가 보이는지 여부
| PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
|---|---|---|---|---|
| panel | Panel | 확인할 Panel의 인스턴스 |
updateRange
Camera의 range를 업데이트합니다
Returns: this
Throws: FlickingError
NOT_ATTACHED_TO_FLICKING init이 이전에 호출되지 않은 경우
updateAlignPos
Camera의 alignPosition을 업데이트합니다
Returns: this
updateAnchors
Camera의 anchorPoints를 업데이트합니다
Returns: this
Throws: FlickingError
NOT_ATTACHED_TO_FLICKING init이 이전에 호출되지 않은 경우
updateAdaptiveHeight
현재 활성화된 패널과 보이는 패널의 최대 높이와 동일하도록 뷰포트의 높이를 업데이트합니다
Returns: this
Throws: FlickingError
NOT_ATTACHED_TO_FLICKING init이 이전에 호출되지 않은 경우
updateOffset
현재 카메라의 오프셋을 업데이트합니다
Returns: this
updatePanelOrder
카메라 엘리먼트에 적용된 direction CSS 속성에 맞게 방향을 업데이트합니다
Returns: this
resetNeedPanelHistory
발생한 needPanel 이벤트들을 초기화하여 다시 발생할 수 있도록 합니다
Returns: this
applyTransform
현재 위치를 기준으로한 transform 스타일을 카메라 엘리먼트에 적용합니다.
Returns: this