콘텐츠
디자인 프로토 타이핑의이면에있는 이유는 새로운 것이 아닙니다. 브라우저에서 디자인에 대한 모든 입소문과 동일합니다. 실제 상황에서 디자인을 보면 완전히 다릅니다. 인터페이스가 어떻게 작동하고 느끼는지에 대해 가정 할 필요가 없을 때 더 나은 결정을 내립니다. 이것은 추가 작업처럼 들릴 수 있지만 디자인이 작동하는 것을 보면서 얻을 수있는 통찰력은 매우 중요합니다.
Framer는 새로운 코드 기반 프로토 타이핑 도구입니다. 평소처럼 Sketch (또는 Photoshop)에서 모형을 만들고 Framer로 가져올 수 있습니다. 그런 다음 약간의 CoffeeScript를 작성하면 많은 작업을 수행 할 수 있습니다.
프로필보기와 사용자 아바타 이미지의 확대보기라는 두 가지보기가있는 iOS 앱 프로토 타입의 예를 사용하여 Framer에서 프로토 타이핑의 기본 사항을 알려 드리겠습니다. 확장 된 사진보기가 어떻게 열리고 닫히는 지 프로토 타입을 만들고 애니메이션을 적용합니다. 여기에서 온라인 데모를보십시오 (소스 코드를 보려면 왼쪽 상단 모서리에있는 아이콘을 클릭하십시오). 또한 framerjs.com에서 다운로드 할 수있는 Framer의 무료 평가판이 필요합니다.
Sketch에서 가져 오기
첫 번째 단계는 Sketch에서 Framer로 레이어를 가져 오는 것입니다. Sketch에서 디자인이 열려있는 동안 Framer에서 가져 오기 버튼을 클릭하고 다음 대화 상자에서 올바른 파일을 선택하기 만하면됩니다. Framer는 각 레이어에서 이미지를 자동으로 가져와 다음과 같은 코드를 통해 액세스 할 수 있도록합니다.
sketch = Framer.Importer.load "가져 오기 / 프로필"
이 변수를 사용하여 가져온 레이어에 액세스합니다. 예를 들어 Sketch 파일에서 'content'라는 레이어를 참조하려면 Framer에 sketch.content를 입력합니다.
마스크 및 아바타 레이어 만들기
이 프로토 타입의 핵심 기능은 탭하면 아바타 이미지를 확장 한 다음 다시 탭하면 닫는 것입니다. 먼저 중첩 마스크 또는 다른 마스크 내부의 마스크라는 두 개의 마스크 레이어를 만듭니다. 멋지고 미묘한 열기 및 닫기 효과를 만들기 위해 두 마스크를 동시에 애니메이션합니다. headerMask 레이어는 확장되면 아바타 사진을 직사각형으로 자르고 마스크 레이어는 프로필보기에서 작은 원으로 자릅니다.
다음과 같이 headerMask 레이어를 만듭니다.
headerMask = 새 레이어 너비 : Screen.width, 높이 : 800 backgroundColor : "transparent"
코드의 첫 줄은 새 레이어를 만들고 이름을 지정합니다. 그런 다음 CoffeeScript의 들여 쓰기 구문을 사용하여 너비, 높이 및 배경 속성을 설정합니다. 아바타 사진이 확장 될 때 아래 레이어가 표시되도록 투명한 배경을 사용합니다.
다음으로 마스크 레이어를 만듭니다.
마스크 = 새 레이어 너비 : 1000, 높이 : 1000 backgroundColor : "transparent", borderRadius : 500 y : sketch.header.height-100 superLayer : headerMask 배율 : 0.2, originY : 0
같은 방식으로 새 레이어를 만들고 속성을 설정합니다. 큰 borderRadius는이 레이어를 원으로 만듭니다. 마스크 레이어를 Sketch에서 가져온 헤더 레이어와 겹치도록 배치합니다. 또한 20 % 또는 0.2로 축소 할 것입니다. originY 0은 이미지의 앵커 포인트 또는 정합을 위쪽 가장자리로 설정합니다.
나머지 속성 인 superLayer는이 새 레이어의 부모로 만든 headerMask 레이어를 설정합니다. 이것이 Framer에서 마스킹이 작동하는 방식입니다. superLayer 속성을 설정하기 만하면 부모 레이어가 자식을 마스킹합니다.
다음으로 아바타 그래픽을 만들고 새 마스크 안에 배치해야합니다. 자르기 경계를 확대 / 축소하고 애니메이션을 적용하기 위해 아바타 레이어를 수동으로 만듭니다. 프로젝트 폴더의 '이미지'하위 폴더에 사진을 복사합니다. 그런 다음 해당 이미지를 사용하여 레이어를 만듭니다.
아바타 = 새 레이어 이미지 : "images / avatar.png"너비 : mask.width, 높이 : mask.height superLayer : mask, force2d : true
아바타의 superLayer를 마스크 레이어로 설정했습니다. 둘 다 이제 headerMask 내에 중첩됩니다. 또한 이미지가 마스크 영역을 완전히 채우도록 너비와 높이를 설정합니다.
마지막으로 애니메이션에 사용할 마스크의 Y 위치를 저장하는 변수를 만듭니다. 화면보다 크기 때문에 가로 중앙에 배치하겠습니다.
maskY = mask.y mask.centerX ()
상태 정의
애니메이션을 만드는 첫 번째 단계는 시작 및 종료 상태를 정의하는 것입니다. Framer에서 상태는 코드로 작성된 키 프레임과 같습니다. 상태는 속성의 모음 일뿐입니다. 모든 레이어에는 기본 상태가 있습니다. 이 프로토 타입의 경우 해당 기본값이 애니메이션의 시작점 역할을하므로 각 레이어에 대해 두 번째 상태 만 설정하면됩니다.
상태 구문은 매우 간단합니다. 레이어를 참조하고 layer.states.add () 메서드를 사용한 다음 포함 할 속성을 나열합니다.
sketch.content.states.add (hide : {opacity : 0}) headerMask.states.add (이동 : {y : 120}) mask.states.add (grow : {scale : 1.1, y : maskY-420})
Sketch에서 가져오고 다른 모든 프로필 화면 요소를 포함하는 콘텐츠 레이어의 두 번째 상태는 완전히 투명해야합니다. 이렇게하면 아바타가 확장 될 때 검은 색 배경이 생기고 나머지 가져온 아이콘과 요소가 표시됩니다.
코드의 두 번째 줄은 headerMask에 대한 상태를 생성하여 간단히 120의 Y 위치로 이동합니다. 이렇게하면 아바타 사진이 확대 될 때 제목과 닫기 버튼이 화면 상단에 표시됩니다. 또한 아바타 사진의 자르기 경계에 애니메이션 효과를줍니다.
마지막으로 마스크 레이어의 새 상태는 이전에 만든 maskY 변수를 사용하여 배율을 높이고 위로 이동합니다. 마스크 레이어의 originY (또는 앵커 포인트)가 위쪽 가장자리이기 때문에 이미지의 중심이 보이도록 420 픽셀만큼 위로 이동해야합니다.
상태 간 애니메이션
기본 상태와 방금 만든 새 상태간에 애니메이션을 적용하려면 4 줄의 코드 만 더 있으면됩니다. 아바타 레이어에 클릭 핸들러를 설정합니다. 사용자가 프로필 화면에서 탭하면 순환 상태 별 확장보기로 전환됩니다. 다시 탭하면 기본 상태로 돌아가 작은 원으로 돌아갑니다. 동일한 코드 줄이 두 상호 작용을 모두 처리합니다.
avatar.on Events.Click,-> headerMask.states.next () mask.states.next () sketch.content.states.next ()
이 블록의 첫 번째 줄은 아바타 레이어에 클릭 핸들러를 설정합니다. 탭할 때마다 자르는 방법이나 크기에 관계없이 다음 명령문이 실행됩니다.
그런 다음 각 레이어를 참조하고 layer.states.next () 메서드를 사용하여 상태를 전환합니다. layer.states.next ()를 사용하면 Framer는 내부 기본 애니메이션 설정을 사용합니다. 이것은 매우 편리하지만 애니메이션 곡선을 미세 조정하여 더 나은 애니메이션을 만들 수 있습니다.
여기에있는 상태를 사용할 때 layer.states.animationOptions 속성을 사용하여 각 애니메이션 곡선을 개별적으로 쉽게 변경할 수 있습니다. 세 가지 약간만 조정하면 애니메이션이 완전히 다르게 느껴집니다.
sketch.content.states.animationOptions = curve : "ease", 시간 : 0.3 headerMask.states.animationOptions = curve : "spring (150, 20, 0)"mask.states.animationOptions = curve : "spring (300, 30, 0) "
페이드 인 및 페이드 인되는 콘텐츠 레이어의 경우 간단한 곡선 사전 설정을 선택하고 이즈를 선택하고 애니메이션 지속 시간을 0.3으로 설정하여 매우 빠릅니다.
headerMask 및 마스크 레이어의 경우 스프링 곡선을 사용합니다. 우리의 목적을 위해 스프링 커브 값이 애니메이션의 속도와 바운스를 변경한다는 것을 알아야합니다. 마스크 레이어의 값은 headerMask 및 콘텐츠보다 애니메이션을 훨씬 빠르게 만듭니다. 스프링 곡선 설정에 대한 자세한 내용은 framerjs.com/docs에서 Framer 설명서를 참조하십시오.
실제 휴대 기기에서 사용해보세요
실제 장치에서 디자인을 보는 것이 에뮬레이터를 사용하는 것보다 훨씬 더 효과적이며 작업에서 이점을 볼 수 있습니다. Framer에는 로컬 네트워크를 통해 프로토 타입에 대한 URL을 제공하는 내장 서버 인 미러 기능이 포함되어 있습니다. 장치를 사용하여 URL을 방문하기 만하면됩니다.
Framer에서 자신의 디자인을 프로토 타입하기 위해 알아야 할 모든 것을 배웠습니다. 당신은 무엇을 기다리고 있는가?
말: Jarrod Drysdale
Jarrod Drysdale은 저자, 디자인 컨설턴트, 디지털 제품 제조업체입니다. 이 기사는 원래 넷 매거진 270 호에 게재되었습니다.
마음에 드 셨나요? 읽어보세요!
- Sketch에서 클릭 가능한 라이브 프로토 타입 만들기
- 블로그를 시작하는 방법
- 최고의 사진 편집자
