[Framer] Study Day03(+sketch)
splash page - 처음 접속화면
splash page에 대해서 아시나용?
splash page란 메인 페이지가 표시되기 전에 내용이나 제목을 소개하는 페이지로 자동으로 점프하는 페이지를 말합니다.
오늘 페이지 구현은 저 같은 경우는 하단의 컨텐츠가 나타나기 이전의 잠깐 나타나는 페이지를 말하는 것이지요! 사실 이번에 효과를 주면서 알게된건 진짜 그런 페이지를 만들어 두고 이후 페이지를 만들기 보다는 자동 점프이기 때문에 흐름(컨텐츠가 나타나는 흐름 또는 애니메이션)에 대해서 신경을 써주면 되는 것 같아요!
음 저 같은 경우는 컨텐츠마다 출력되는 속도에 차이를 두어 작업을 해주는 것으로 생각이 되더라구요!
예시 화면 입니다~
모바일에서는 gif가 잘 실행이 안되는 느낌이에용.. pc로 보시면 좀 더 괜찮을지도... 몰라용.. 흐흐요런 페이지를 만들기 위해서는 에니메이션을 사용하게 됩니다~
작업 화면을 먼저 보여드리고 코드에 대해서 해석을 해드리겠습니다!
# Import file "Sample01"
sketch = Framer.Importer.load("imported/Sample01@4x", scale: 1) [스케치 파일은 불러옵니다.]
[ 처음 불러왔을 때의 1번 화면이라고 할 수 있습니다.]
sketch.bg.scale =3 [ bg화면의 크기가 원크기에 3배입니다.]
sketch.bg.opacity =0 [ 처음 투명도는 0%입니다. ]
sketch.logo.scale= 0.5 [ 로고의 사이즈는 50%입니다.]
sketch.logo.opacity = 0 [ 처음 투명도는 0%입니다. ]
sketch.logo.y = 400 [ 로고의 y축은 400에서 시작합니다. ]
sketch.main_content.opacity = 0 [ main_content의 투명도는 0%입니다.]
sketch.bg.animate [bg에 애니메이션을 추가합니다.]
scale : 1, opacity : 1 [크기는 1, 투명도는 100% 입니다. - 처음 화면에서 이것으로 변함.]
options:
time: 1.7 [ 시간 값으로 추가적으로 변경하면서 효과의 느낌을 봐야합니다. ]
sketch.logo.animate
scale : 1, opacity : 1
options:
time: 1
y : 160 [ 처음 위치에서 y 값이 이 160으로 이동합니다.]
sketch.main_content.animate
scale: 1, opacity: 1
options :
delay : 1.5 [ 늦게 나타나는 시간입니다. ]
주의점을 몇가지 써보면,
1. time, delaty 속도에 관한 것들은 계속해서 효과를 확인하면서 맞춰봐야 하는 것 같습니다.
2. 처음쓴 코드가 가장 처음 나타나고 나중에 쓰는 코드가 나중에 출력되는 코드라고 생각하면 될 것 같습니다.
3. animate 라는 선언이 애니메이션 효과를 부여한다는 선언이라는 것!
4. curve라는 옵션을 통해서 효과를 좀 더 다이나믹하게 표시할 수 있는데, 이런 부분은 저는 계속 써보면서 익혀야 하는 부분이고, 너무 많이 사용하는 것은 살짝 조잡한 느낌을 줄 수 있기 때문에 이번에는 배제하도록 했습니다.
5. 스케치와의 연동을 통해서 작업을 하면서 지난번에 소개했던 스케치를 이용해서 작업하는 두가지 방법(1. framer내 import 기능, 2. sketch에 코드 플러그인을 통한 붙여넣기 기능)을 모두 사용해 보았는데, 저는 프레이머에서 import 기능을 통해서 불러오는 것이 좀 더 효과적이라는 생각이 들더라구요!! 코드 플러그인을 설치해서 붙여넣기 했는데... 음... 동일하게 페이지가 불러올 수 없더라구요. 불러온 뒤에 다시 수정을 해야하는 것을 보고 그냥 import를 통해서 작업하는게 훨씬 효율적이라는 것을 알았습니다!!!
하지만, 저는 그러했지만 코드 플러그인을 사용해보시고 싶으신 분들은 아래 페이지에서 코드 플러그인을 다운 받으실 수 있습니다.
+ Curve 값에 대한 자세한 설명이 첨부된 자료입니다~
