[Framer] Study Day02 (+sketch)

Sketch 파일 활용한 작업 /Tap- 페이지 전환하기

안녕하세요~ 여러분~ 새해가 밝았습니다~. 다들 새해 복 많이 받으시고, 건강하고 행복한 일만 가득하시길 바랄께요~. 저는... 몸이 좀 안좋아 글이 좀 늦어졌어요..ㅜㅜ 죄송(?)하옵니다.. 흐흐

---

오늘의 작업은 간단히 Tap 해서 페이지 전환입니다.

완성된 영상은 아래 화면 입니다!

우선 시범으로 스케치 파일에서 두장의 파일을 만들어 봤어요!

제가 이번 작업을 하면서 정말 주의해야하는 점을 발견한 것을 Layer 이였습니다! 레이어를 보면 Group지정을 많이 해두었는데요, Framer에서 코드 작성 시 명령을 내릴 수 있는 것은 Group 이기 때문에 하나의 레이어라도 효과를 주기 위해서는 따로 Group을 지정해야 한다는 것!! 꼭 주의 하셔야 할 듯 합니다!!

스케치 작업

[ 코드 해석 ]

flow1 = new FlowComponent [화면전환이 이루어진다는 선언]

# Import file "Sample01"

sketch2 = Framer.Importer.load("imported/Sample01@4x", scale: 1) [스케치 파일 불러옴]

flow1.showNext(sketch2.Main) [ 첫 화면은 Sketch2에서 'Main'이라는 이름의 화면 ]

sketch2.intro.onClick -> [intro를 클릭하면]

flow1.showNext(sketch2.Main_Copy) [ sketch2에서 Main_Copy 화면 물러옴]

요렇게 간단한 코드 작성으로 화면 전환을 할 수 있어요!!

이해가 안되는 부분이 있으시다면 댓글달아주시면 잘은 모르지만 함께 고민해 보도록 하겠습니다.

코드는 아무래도 어느정도 외워야 하는 부분은 있는 것 같아요.. 흐흐

---

주의점 몇가지를 작성해 보자면,

1. 스케치 파일을 불러올 때 '@1x' 요런 것을 보실 수 있는데 이건 해상도라고 생각하시면 되요. 저는 일단 제일 높은 해상도로 선택해서 '@4x'로 가져왔습니다.

2. 위에서 말했던 것처럼 group 지정은 정말 잘 해주셔야 해요 지금 제가 코드 쓴것 중에 intro라고 작성한 부분이 있는데 이건 낯개 layer가 아니라 Group 속에 레이어 하나가 속해 있는 것입니다! 효과(클릭 등 다양한 것)를 주려면 Group 지정을 해주세요!

3. 어떤 순서에 따라서도 화면이 출력되지 않을 수 있어요! 상단에 선언을 먼저 하고 sketch 파일을 불러와야 했는데 이런 순서가 굉장히 중요하다는 것!