splash page - 처음 접속화면
splash page에 대해서 아시나용?
splash page란 메인 페이지가 표시되기 전에 내용이나 제목을 소개하는 페이지로 자동으로 점프하는 페이지를 말합니다.
오늘 페이지 구현은 저 같은 경우는 하단의 컨텐츠가 나타나기 이전의 잠깐 나타나는 페이지를 말하는 것이지요! 사실 이번에 효과를 주면서 알게된건 진짜 그런 페이지를 만들어 두고 이후 페이지를 만들기 보다는 자동 점프이기 때문에 흐름(컨텐츠가 나타나는 흐름 또는 애니메이션)에 대해서 신경을 써주면 되는 것 같아요!
음 저 같은 경우는 컨텐츠마다 출력되는 속도에 차이를 두어 작업을 해주는 것으로 생각이 되더라구요!
예시 화면 입니다~
요런 페이지를 만들기 위해서는 에니메이션을 사용하게 됩니다~
작업 화면을 먼저 보여드리고 코드에 대해서 해석을 해드리겠습니다!
# 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 [ 늦게 나타나는 시간입니다. ]
주의점을 몇가지 써보면,
하지만, 저는 그러했지만 코드 플러그인을 사용해보시고 싶으신 분들은 아래 페이지에서 코드 플러그인을 다운 받으실 수 있습니다.
+ Curve 값에 대한 자세한 설명이 첨부된 자료입니다~