레이어 마스킹

Masking Layers

레이어와 그 밑에 깔린 자식 레이어에 마스크를 추가하기

오리가미 스튜디오의 고급 인터랙션과 애니메이션을 만들기 위해 마스크를 사용할 수 있다는 점에서 다른 디자인 도구와 비슷합니다. 메신저에서 이미지를 라이트박스로 열기/끄기를 할 때 이미지 모서리의 반경을 변화시키는 프로토타입 작업을 할 예정입니다.

설정하기

탭했을 때 라이트박스로 바꾸어 Scale Position 속성을 변경하도록 이미 이미지 컨테이터를 설정하였습니다. 마지막으로 해야 할 일은 이미지 자체에 둥근 모서리를 변경하는 것입니다. 메신저 내에서는 이미지의 반경이 28이지만 라이트박스로 펼쳐지면 반경은 0(반경 없음) 입니다.

이 이미지는 말풍선 안에서는 둥근 모서리를 가져야 합니다.

마스크 레이어 준비하기

Image 레이어에는 반경 속성이 없습니다. 이미지 레이어에 반경을 만들려면 Radius 속성이 있는 레이어 유형으로 사용하고 이를 마스크로 사용해야 합니다.

Rounded Rectangle은 반경 속성이 있는 레이어 유형입니다. 새 레이어 버튼을 클릭하고 Rounded Rectangle을 입력한 후, 리턴키()를 누르세요.

새 Rounded Rectangle 레이어를 이미지와 동일한 Group, 이미지 아래에 배치합니다. 이는 Image 레이어가 Rounded Rectangle 위에 가려지기 때문입니다.

마스크 만들기

이미지를 마스크하려면 마스크로 사용할 레이어 (Rounded Rectangle)를 선택한 다음 Layer > Use as Mask (마스크로 사용, ⌘M) 으로 이동해야합니다.

Rounded Rectangle 레이어가 선택되어 있어야 하는 점 잊지 마세요.

마스크 편집하기

Rounded Rectangle 바로 위의 이미지가 이제 Rounded Rectangle의 모양으로 가려집니다. Rounded Rectangle 속성을 변경하면 이미지에도 시각적으로 반영됩니다.

같은 크기가 되기를 원하기 때문에, Rounded Rectangle의 Size 및 Position 속성을 이미지와 일치하도록 변경하세요. 이미지의 Size 속성은 375 x 250이고, Radius는 28입니다.

지금까지 잘 따라오셨다면 Position 속성은 이미 ‘0’으로 되어 있어야 합니다.

마스크로 전환하기

이미지에 탭을 해서 라이트박스로 전환할 때 Radius 0으로 변경되어야 합니다. Transition 패치는 이미 패치 에디터에서 준비되어 있으며 애니메이션은 28에서 시작하여 0에서 끝납니다.

마지막 단계는 Transition 패치 출력을 Rounded Rectangle의 반경 속성에 연결하는 것입니다. 계속해서 연결하세요. 이제 반경 반지름이 변경되고 이 마스크가 적용된 Image 레이어가 변경됩니다.

프로토타입이 제대로 작동하지 않으면 레이어의 순서를 다시 확인하고 Rounded Rectangle을 마스크로 사용했는지 확인하세요. 레이어 패널을 검사하며 서로 영향을 미치는 레이어와 마스크를 확인합니다.

아래쪽을 가리키는 화살표는 마스크 된 레이어를 보여줍니다. 모서리 글리프는 어떤 레이어가 마스크로 작동하는지 보여줍니다.

원문: http://origami.design/tutorials/smarter-interactions/Masking-Layers.html


 

연관된 Learn 콘텐츠

 

스크린 트랜지션 Screen Transition

화면 흐름 만들기

adding_logic

로직 추가 Adding Logic

트랜지션과 플로우에 로직 추가