스크린 트랜지션

Screen Transition

화면 흐름 만들기

오리가미에서 화면의 흐름을 만드는 것은 생각보다 쉽우며, 화면 내에서 좀 더 복잡한 상호작용도 허용하고 있습니다.

스크린 중 하나에서 스크롤 동작을 통해 인스타그램 부메랑Instagram Boomerang 인터페이스를 다시 만들어 보겠습니다. 여기에는 화면 이동으로써의 오프셋과 같은 고급 iOS 동작도 있습니다.

스크린

튜토리얼 파일에는 이미 세 개의 Screen 레이어가 설정되어 있습니다. 더 추가해야하는 경우 새 레이어 버튼(⇧⌘N)을 클릭하고 Screen을 입력하여 추가하세요.

origamikorea_screentransition01

스크린 시작 상태

지금 당장은 화면이 디폴트로 표시되므로 서로 겹쳐져 있습니다. ScreenShare 클릭하고 Start State Dismissed 변경하세요.

origamikorea_screentransition02

뷰어 툴바에서 프로토타입 재시작 버튼을 클릭하여 프로토타입을 다시 시작한 다음 Screen Boomerangs 대한 프로세스를 반복하세요. Screen Boomerangs 레이어를 클릭하고 Start State Dismissed 변경한 다음 프로토타입 재시작 버튼을 클릭합니다.

origamikorea_screentransition03

이제 기본적으로 Screen Main이 표시되고 다른 모든 화면은 숨겨져 있어야 합니다.

마지막 화면은 Screen Main입니다. 이것은 어디에도 가지 않기 때문에 일반적인 Group 레이어입니다.

스크린 연결하기

번째 화면 전환은 Screen Main에서 Screen Boomerangs 진행됩니다. 화면 전환을 위해서는 Hit Area 필요합니다.

Open Boomerangs라는 Hit Area 화면 메뉴 내에 존재하며, 뷰어의 썸네일을 덮고 있습니다. Open Boomerangs 위에 마우스를 올려 놓고 Touch 클릭한 다음 Tap 클릭합니다.

origamikorea_screentransition04

Open Boomerangs Hit Area Tap 아웃풋을 Screen Boomerangs Present 속성에 연결합니다. 화면 메뉴에서 썸네일 이미지를 누르면 Screen Boomerangs 열립니다.

origamikorea_screentransition05

레이어 패널에서 레이어 이름으로 드래그 할 수도 있습니다. 레이어가 확장되어 속성이 표시됩니다.

Screen 모든 것을 처리하기 때문에 Switch, Pop Animation, Transition 패치를 추가할 필요가 없습니다.

돌아가기 링크

다음으로 필요한 것은 Screen Main으로 돌아갈 있는 방법입니다. 이를 위해서 Screen Boomerangs 내에 Dismiss Boomearangs라는 Hit Area 이미 생성되어 있습니다.

이전과 마찬가지로 Dismiss Boomerangs 위에 마우스를 올려 놓고 Touch 클릭한 다음 Tap 클릭합니다.

origamikorea_screentransition06

새로운 Interaction 패치가 Screen Boomerangs 영향을 것입니다. 새로운 Interaction 패치의 Tap 클릭하고 드래그하여 Screen Boomerangs 닫습니다.

origamikorea_screentransition07

이전과 마찬가지로, 이번에는 Present 대신에 Dismiss 선택합니다.

이제 프로토타입의 엑스 버튼을 탭하면 Screen Main으로 돌아가고 썸네일을 클릭하면 Screen Boomerangs 이동합니다.

트랜지션 유형 변경하기

사소한 세부사항 중 하나는 Boomerang이 사실 이 프로토타입의 측면에서 나오는 반면, 실제 앱에서는 아래에서 오는 것입니다. 오리가미의 화면은 이러한 트랜지션 유형을 모두 지원합니다.

Screen Boomerangs Transition 속성으로 이동하고 Push에서 Modal 이동합니다.

origamikorea_screentransition08

썸네일 이미지를 클릭하면 아래에서 Screen Boomerangs 나오고 엑스 버튼을 탭하면 Screen Boomerangs 다시 내려와야 합니다.

흐름 완료

마지막 화면은 Screen Share라고 불리는 첫 번째 썸네일을 더 가까이 보는 것입니다. 이전과 마찬가지로, Hit Area는 이미 Open Share라는 이름으로 준비되어 있습니다.

Open Share 위로 마우스를 이동하고 Touch 클릭한 다음 Tap 클릭하여 화면을 흐름에 추가합니다. 이전과 마찬가지로 아웃풋을 Present Screen Share 연결합니다.

origamikorea_screentransition09

Tap 아웃풋을 Present Screen Share 연결하기

첫 번째 썸네일 이미지를 탭하면 이제 Share Screen으로 이동합니다. 마지막으로 추가하려는 화면 트랜지션은 Screen Boomerangs로 되돌아가는 것입니다.

이전에 이미 Dismiss Share라고 불리는 Screen Share 아래의 Hit Area 이미 설정했습니다. 마우스를 Dismiss Share 위에 올리고 Touch 클릭한 다음 Tap 클릭합니다. 새로운 인터랙션의 Tap 아웃풋을 Dismiss Screen Share 연결합니다.

origamikorea_screentransition10

화면 내 인터랙션

이제 전체 화면 흐름을 완성해야 합니다. 스크린 내에서 원하는 모든 것이든 쉽게 할 수 있습니다.

예를 들어 Boomerang 그리드를 스크롤 되게 만들 수 있습니다. Boomerangs 레이어 자체는 뷰어 밖으로 나가선 몇 개의 썸네일 이미지가 더 있습니다.

레이어 패널에서 Open Screen Boomerangs를 선택합니다. Boomerangs 레이어 위로 마우스를 가져간 다음 Touch를 클릭하고 Scroll Y를 클릭합니다.

origamikorea_screentransition11

수직 스크롤이기 때문에 Scroll Y를 선택합니다.

오프셋

화면 전환 내 오프셋은 표준 iOS 푸시 전환 동작이지만 화면 흐름을 만드는 데 중요하지 않습니다. 이 프로토타입에 오프셋을 만들려면 먼저 Screen Share 오프셋이 무엇인지 알아야 합니다.

Screen Share 위로 마우스를 이동하고 Touch를 클릭한 다음 X Offset 아웃풋을 클릭합니다.

origamikorea_screentransition12

인풋과 아웃풋 모두와 상호작용할 수 있습니다.

두 화면 사이를 이동할 때 오프셋을 변경할 수 있습니다. 이 아웃풋된 값을 클릭하고 레이어 패널로 끌어서 Screen Boomerangs X Offset 속성에 연결합니다.

origamikorea_screentransition13

이제 화면 사이를 이동할 아웃풋된 Screen Share Offset Screen Boomerangs Offset 인풋에도 영향을 줍니다.

원문: http://origami.design/tutorials/common-interactions/Screen-Transitions.html


연관된 Learn 콘텐츠

 

스크롤 뷰 Scrolling Views

수평 스크롤 동작 추가하기