Framer code DOC — 12

Flow

4 min readJun 4, 2017

FlowComponent를 사용하면 여러 화면 사이를 전환하고 탐색 할 수 있습니다. 정적인 화면을 완벽하게 대화형 흐름으로 바꾸는데 특히 유용합니다.

FlowComponent의 독특한 점은 보고있는 화면이 알고 있다는 것입니다. 당신의 기록을 추적하고 언제든지 앞뒤로 탐색 할 수 있습니다. 기본적으로 자세한 자연스러운 전환이 특징입니다. 화면을 전환하면 현재 화면이 자동으로 시야에서 제외됩니다. 또한 모달과 같은 것에 오버레이를 추가하면 배경 반투명의 어두운 오버레이를 가져옵니다.

FlowComponent에 레이어를 추가하는 것부터 시작하자. 이것은 PageComponent에 레이어를 추가하는 것과 동일한 방식으로 작동하고 showNext 함수를 사용하여 쉽게 할 수 있습니다. 추가한 첫 번째 레이어는 애니메이션이 적용되지 않습니다.

# FlowComponent를 만들고, layerA를 보여주기 
flow = new FlowComponent
flow.showNext(layerA)

스크린 전환하기 (Switching Screens)

showNext 함수를 사용하여 다음 화면으로 이동할 수 있습니다.

# FlowComponent 생성, 레이어 표시
flow = new FlowComponent
flow.showNext(layerA)
 
# 클릭시 화면 전환
layerA.onClick ->
     flow.showNext(layerB)

Framer는 현재 보고있는 화면을 추적합니다. showPrevious 함수를 사용하여 이전 화면으로 다시 전환 할 수 있습니다.

# 다음 화면으로 전환
layerA.onClick ->
     flow.showNext(layerB)
 
# 이전 화면으로 전환
layerB.onClick ->
     flow.showPrevious()

오버레이 (Overlays)

showOverlay 함수 중 하나를 사용하면 레이어에 오버레이 할 수 있습니다. 현재 화면은 반투명의 어두운 배경이 됩니다. 이것은 사이드 바 및 액션 시트와 같은 작은 레이어를 오버레이 할 때 가장 눈에 들어옵니다. 당신은 다음 중 하나를 지정할 수 있습니다.

showOverlayCenter
showOverlayTop
showOverlayRight
showOverlayBottom
showOverlayLeft

# FlowComponent 만들기
flow = new FlowComponent
 
# 모달과 버튼은 디자인 탭에서 설정됩니다.
 
# 뒤로 전환
button.onClick ->
     flow.showOverlayCenter (모달)

스크롤링 (Scrolling)

FlowComponent의 높이 또는 폭을 초과하는 자식 레이어는 자동으로 스크롤 할 수 있습니다. 높이가 크면 세로 스크롤 가능하고, 폭이 넓으면 가로로 스크롤 할 수 있습니다. 이 스크롤 가능한 레이어는 flow.scroll를 사용하여 타겟팅 할 수 있습니다. 모든 scroll 속성 및 이벤트를 사용할 수 있습니다.

아트 보드의 상단이나 하단에 배치 된 레이어 탭과 탐색 바는 헤더와 푸터로 인식됩니다. 이 작업을 하려면, 아트보드가 디바이스의 화면의 높이를 초과해야 합니다.

FlowComponent에 고정 푸터 또는 헤더를 추가하려면, header와 footer의 속성을 사용할 수 있습니다. 그러면 다음 화면으로 이동해도 디바이스 화면의 상단이나 하단에 고정됩니다.

# 고정된 탐색 바 설정 (상단)
flow.header = flowBar
 
# 고정된 탭 막대 설정 (하단)
flow.footer = tabBar

Scrolling Example

아래 예제를 통해 Design의 아트 보드가 고정 된 헤더 및 푸터와 함께 자동으로 스크롤이 되는 방법을 확인하십시오.

Open Example>