Device
DeviceComponent은 iPhone, iPad 혹은 Android 장치를 에뮬레이션한다. 이것을 통해 콘텐츠 영역의 크기를 조절하고 가로/세로 전환 등을 할 수 있다. 장치가 설정된 후에는 모든 것이 화면내에서 렌더링이 일어난다. 장치 미리보기는 미러링된 미리보기와 일치하는데 이 말은 iPhone으로 미리보기를 설정한 경우 iPhone의 전체 화면으로 보는 것과 같은 화면을 볼 수 있다는 뜻이다.
크기 조절과 가로/세로 전환은 Framer.Device로 미리 설정할 수 있다 :
Framer.Device.contentScale = 0.5
Framer.Device.orientation = 90
밑단을 보면 장치는 수많은 layer의 집합으로 구성되어 있다. 이렇기 때문에 커스터마이징이 쉽고 동작을 추가하기도 쉽워진다. 여러분은 Github에서 전체 소스를 확인할 수 있다. 일반적인 예제는 아래와 같다 :
# blur 처리된 백그라운드 이미지 설정하기
Framer.Device.background.image = "photo.jpg"
Framer.Device.background.blur = 10
# 현재 디바이스의 스크린 크기 가져오기
print Framer.Device.screen.width # Output: 640
print Framer.Device.screen.height # Output: 480
scale-to-fit 뷰는 화면 비율을 유지하기 위해 오프 픽셀 콘텐츠를 렌더링 할 수 있다. 50%, 100% 등으로 볼 때 콘텐츠는 항상 snap-to-pixel이다. 만약 브라우저가 이 기능을 지원한다면, 이미지 사이즈를 축소하기 위해 JPEG2000으로 압축된다.
Device.deviceType <string>
렌더링할 장치의 타입을 나타내는 속성값으로 아래와 같은 가능한 옵션이 제공된다.
Fullscreen
전체 화면으로 렌더링 하기
Framer.Device.deviceType = "fullscreen"
iPhone 6
선택 가능한 iPhone 6 색상
Framer.Device.deviceType = "iphone-6-spacegray"
Framer.Device.deviceType = "iphone-6-spacegray-hand"
Framer.Device.deviceType = "iphone-6-silver"
Framer.Device.deviceType = "iphone-6-silver-hand"
Framer.Device.deviceType = "iphone-6-gold"
Framer.Device.deviceType = "iphone-6-gold-hand"
iPhone 5s
선택 가능한 iPhone 5s 색상
Framer.Device.deviceType = "iphone-5s-spacegray"
Framer.Device.deviceType = "iphone-5s-spacegray-hand"
Framer.Device.deviceType = "iphone-5s-silver"
Framer.Device.deviceType = "iphone-5s-silver-hand"
Framer.Device.deviceType = "iphone-5s-gold"
Framer.Device.deviceType = "iphone-5s-gold-hand"
iPhone 5c
선택 가능한 iPhone 5c 색상
Framer.Device.deviceType = "iphone-5c-green"
Framer.Device.deviceType = "iphone-5c-green-hand"
Framer.Device.deviceType = "iphone-5c-blue"
Framer.Device.deviceType = "iphone-5c-blue-hand"
Framer.Device.deviceType = "iphone-5c-red"
Framer.Device.deviceType = "iphone-5c-red-hand"
Framer.Device.deviceType = "iphone-5c-white"
Framer.Device.deviceType = "iphone-5c-white-hand"
Framer.Device.deviceType = "iphone-5c-yellow"
Framer.Device.deviceType = "iphone-5c-yellow-hand"
iPad Mini
선택 가능한 iPad Mini 색상
Framer.Device.deviceType = "ipad-mini-spacegrey"
Framer.Device.deviceType = "ipad-mini-spacegrey-hand"
Framer.Device.deviceType = "ipad-mini-silver"
Framer.Device.deviceType = "ipad-mini-silver-hand"
Nexus
Nexus 5와 Nexus 9은 검정 색상.
Framer.Device.deviceType = "nexus-5-black"
Framer.Device.deviceType = "nexus-5-black-hand"
Framer.Device.deviceType = "nexus-9"
Device.fullScreen <boolean>
deviceType과 무관하게 장치의 전체 화면을 그리는 것을 설정한다. true 혹은 false로 설정한다.
# Render the device in fullscreen
Framer.Device.fullScreen = true
Device.deviceScale <number / string>
장치의 scale이다. scale 값의 범위는 0.5부터 1 사이의 값이다.
Framer.Device.deviceScale = 0.5
Device.setDeviceScale(scale <number>, animate <boolean>)
Device.setDeviceScale(scale, animate)
장치의 scale과 추가적인 애니메이션을 설정한다(true 혹은 false). scale 값의 범위는 0.5부터 1 사이의 값이다.
# 장치의 scale과 애니메이션 설정
Framer.Device.setDeviceScale(0.5, true)
Device.contentScale <number>
custom device를 포함한 컨텐츠의 scale이다. scale 값의 범위는 0.5부터 1 사이의 값이다.
# 컨텐츠 scale 설정
Framer.Device.contentScale = 0.5
Device.setContentScale(scale <number>, animate <boolean>)
컨텐츠의 scale과 추가적인 애니메이션을 설정한다(true 혹은 false). scale 값의 범위는 0.5부터 1 사이의 값이다.
# 컨텐츠 scale과 애니메이션 설정
Framer.Device.setContentScale(0.5, true)
Device.orientation <number>
장치의 방향. 방향 값으로는 0과 90을 줄 수 있다(가로와 세로 방향).
Framer.Device.orientation = 90
Device.setOrientation(scale <number>, animate <boolean>)
장치의 방향과 추가적인 애니메이션을 설정한다(true 혹은 false). 방향 값으로는 0과 90을 줄 수 있다(가로와 세로 방향).
# 장치의 방향과 애니메이션 설정
Framer.Device.setOrientation(90, true)
Device.orientationName <string>
이름을 직접 명시하여 장치의 방향을 설정한다. 사용할 수 있는 옵션은 "portrait"와 "landscape"이다. portrait와 landscape은 각각 장치의 방향에 대해 0과 90을 주는 것과 같은 효과이다.
# "portrait"와 "landscape" 중에 방향 설정하기
Framer.Device.orientationName = "landscape"
Framer.Device.orientationName = "portrait"
Device.rotateLeft()
장치의 화면을 왼쪽으로 회전시킨다(장치는 시계 방향으로 돈다).
Framer.Device.rotateLeft()
Device.rotateRight()
장치의 화면을 오른쪽으로 회전시킨다(장치는 반 시계 방향으로 돈다).
Framer.Device.rotateRight()