设备

设备组件模拟一个真实的设备，比如iPhone, iPad或Android。你可以调整设备显示比例、内容显示比例以及调整设备方向。当设备设置完成，就会在其屏幕内渲染你的原型。设备预览和镜像预览相匹配，也就是说，当你把设备设为iPhone并使用iPhone真机预览时，他就会在你的手机上全屏显示。

你也可以使用Framer.Device提前设置缩放比例和设备方向。

  1. Framer.Device.contentScale = 0.5
  2. Framer.Device.orientation = 90

本质上来讲，设备也是一些图层。所以你可以自己去定制，或给它添加一些行为。下面给出一些常见的例子，你可以在Github上查看完整资源。

  1. # Set a blurred background image 
  2. Framer.Device.background.image = "photo.jpg"
  3. Framer.Device.background.blur = 10
  5. # Get the screen dimensions for the current device 
  6. print Framer.Device.screen.width  # Output: 640 
  7. print Framer.Device.screen.height # Output: 480

请注意：缩放以适应视图能够让内容按照屏幕比例渲染，有可能像素有些偏差。当视图比例设置为50%、100%时，你的内容将总是以像素对齐。如果浏览器支持的话，设备图像将会压缩为JPEG2000格式用以降低图片大小。

想要移动设备时，也只需要像普通图层一样改变x和y的值。

  1. # Set the Device position 
  2. Framer.Device.screen.x = 50
  3. Framer.Device.x = 50
  5. # Change from the current Device position 
  6. Framer.Device.screen.x += 50
  7. Framer.Device.x += 50

Device.customize(deviceType, screenWidth, screenHeight, deviceImage, deviceImageWidth, deviceImageHeight, devicePixelRatio)

自定义设备的图像和尺寸。如果你自定义的设备是一个手机或者 pad ，你需要注明它的 deviceType 属性，这样在你使用该设备尺寸打开预览时才会自动隐藏设备图片。

  1. # Define and set custom device 
  2. Framer.Device.customize
  3.     deviceType: Framer.Device.Type.Tablet
  4.     screenWidth: 720
  5.     screenHeight: 1024
  6.     deviceImage: "http://f.cl.ly/items/001L0v3c1f120t0p2z24/custom.png"
  7.     deviceImageWidth: 800
  8.     deviceImageHeight: 1214
  9.     devicePixelRatio: 1

Device.deviceType <字符串>

渲染时使用的设备类型，下面是所有可用的选项。

Fullscreen

全屏显示。

  1. Framer.Device.deviceType = "fullscreen"

iPhone 6s

各种颜色的iPhone 6s。

  1. Framer.Device.deviceType = "apple-iphone-6s-gold"
  2. Framer.Device.deviceType = "apple-iphone-6s-rose-gold"
  3. Framer.Device.deviceType = "apple-iphone-6s-silver"
  4. Framer.Device.deviceType = "apple-iphone-6s-space-gray"

iPhone 6+

各种颜色的iPhone 6plus。

  1. Framer.Device.deviceType = "apple-iphone-6s-plus-gold"
  2. Framer.Device.deviceType = "apple-iphone-6s-plus-rose-gold"
  3. Framer.Device.deviceType = "apple-iphone-6s-plus-silver"
  4. Framer.Device.deviceType = "apple-iphone-6s-plus-space-gray"

iPhone 5s

各种颜色的iPhone 5s。

  1. Framer.Device.deviceType = "apple-iphone-5s-gold"
  2. Framer.Device.deviceType = "apple-iphone-5s-silver"
  3. Framer.Device.deviceType = "apple-iphone-5s-space-gray"

iPhone 5c

各种颜色的iPhone 5c。

  1. Framer.Device.deviceType = "apple-iphone-5c-blue"
  2. Framer.Device.deviceType = "apple-iphone-5c-green"
  3. Framer.Device.deviceType = "apple-iphone-5c-red"
  4. Framer.Device.deviceType = "apple-iphone-5c-white"
  5. Framer.Device.deviceType = "apple-iphone-5c-yellow"

iPad Mini

各种颜色的iPad Mini。

Framer.Device.deviceType = “apple-ipad-mini-4-silver” Framer.Device.deviceType = “apple-ipad-mini-4-gold” Framer.Device.deviceType = “apple-ipad-mini-4-space-gray”

iPad Air

各种颜色的iPad Air。

  1. Framer.Device.deviceType = "apple-ipad-air-2-silver"
  2. Framer.Device.deviceType = "apple-ipad-air-2-gold"
  3. Framer.Device.deviceType = "apple-ipad-air-2-space-gray"

iPad Pro

各种颜色的iPad Pro。

  1. Framer.Device.deviceType = "apple-ipad-pro-silver"
  2. Framer.Device.deviceType = "apple-ipad-pro-gold"
  3. Framer.Device.deviceType = "apple-ipad-pro-space-gray"

Apple Watch 38mm

各种颜色的Apple Watch 38mm。

  1. Framer.Device.deviceType = "apple-watch-38mm-gold-black-leather-closed"
  2. Framer.Device.deviceType = "apple-watch-38mm-rose-gold-black-leather-closed"
  3. Framer.Device.deviceType = "apple-watch-38mm-stainless-steel-black-leather-closed"
  5. Framer.Device.deviceType = "apple-watch-38mm-black-steel-black-closed"
  6. Framer.Device.deviceType = "apple-watch-38mm-gold-midnight-blue-closed"
  7. Framer.Device.deviceType = "apple-watch-38mm-rose-gold-lavender-closed"
  9. Framer.Device.deviceType = "apple-watch-38mm-sport-aluminum-blue-closed"
  10. Framer.Device.deviceType = "apple-watch-38mm-sport-aluminum-fog-closed"
  11. Framer.Device.deviceType = "apple-watch-38mm-sport-aluminum-green-closed"
  12. Framer.Device.deviceType = "apple-watch-38mm-sport-aluminum-red-closed"
  13. Framer.Device.deviceType = "apple-watch-38mm-sport-aluminum-walnut-closed"
  14. Framer.Device.deviceType = "apple-watch-38mm-sport-aluminum-white-closed"
  15. Framer.Device.deviceType = "apple-watch-38mm-sport-space-gray-black-closed"

Apple Watch 42mm

各种颜色的Apple Watch 42mm。

  1. Framer.Device.deviceType = "apple-watch-42mm-gold-black-leather-closed"
  2. Framer.Device.deviceType = "apple-watch-42mm-rose-gold-black-leather-closed"
  3. Framer.Device.deviceType = "apple-watch-42mm-stainless-steel-black-leather-closed"
  5. Framer.Device.deviceType = "apple-watch-42mm-black-steel-black-closed"
  6. Framer.Device.deviceType = "apple-watch-42mm-gold-midnight-blue-closed"
  7. Framer.Device.deviceType = "apple-watch-42mm-rose-gold-lavender-closed"
  9. Framer.Device.deviceType = "apple-watch-42mm-sport-aluminum-blue-closed"
  10. Framer.Device.deviceType = "apple-watch-42mm-sport-aluminum-fog-closed"
  11. Framer.Device.deviceType = "apple-watch-42mm-sport-aluminum-green-closed"
  12. Framer.Device.deviceType = "apple-watch-42mm-sport-aluminum-red-closed"
  13. Framer.Device.deviceType = "apple-watch-42mm-sport-aluminum-walnut-closed"
  14. Framer.Device.deviceType = "apple-watch-42mm-sport-aluminum-white-closed"
  15. Framer.Device.deviceType = "apple-watch-42mm-sport-space-gray-black-closed"

Nexus

谷歌各个版本的Nexus设备。

  1. Framer.Device.deviceType = "google-nexus-4"
  2. Framer.Device.deviceType = "google-nexus-5x"
  3. Framer.Device.deviceType = "google-nexus-6p"
  4. Framer.Device.deviceType = "google-nexus-9"

HTC One A9

各种颜色的的HTC One A9设备。

  1. Framer.Device.deviceType = "htc-one-a9-black"
  2. Framer.Device.deviceType = "htc-one-a9-white"

HTC One M8

各种颜色的的HTC One M8设备。

  1. Framer.Device.deviceType = "htc-one-m8-black"
  2. Framer.Device.deviceType = "htc-one-m8-gold"
  3. Framer.Device.deviceType = "htc-one-m8-silver"

Microsoft Lumia 950

各种颜色的微软Lumia 950设备。

  1. Framer.Device.deviceType = "microsoft-lumia-950-black"
  2. Framer.Device.deviceType = "microsoft-lumia-950-white"

Samsung Note 5

各种颜色的三星Note 5设备。

  1. Framer.Device.deviceType = "samsung-galaxy-note-5-black"
  2. Framer.Device.deviceType = "samsung-galaxy-note-5-gold"
  3. Framer.Device.deviceType = "samsung-galaxy-note-5-pink"
  4. Framer.Device.deviceType = "samsung-galaxy-note-5-silver-titanium"
  5. Framer.Device.deviceType = "samsung-galaxy-note-5-white"

Device.fullScreen <布尔值>

设置是否使用全屏显示原型，该属性独立于deviceType。

  1. # Render the device in fullscreen 
  2. Framer.Device.fullScreen = true

Device.deviceScale <数字 / 字符串>

设备缩放比例，允许的值是0.5到1。

  1. Framer.Device.deviceScale = 0.5

Device.setDeviceScale(scale, animate)

设置设备缩放比例，这个函数会有一个额外的动画选项animation（true或false）。允许的值是0.5到1。

  1. # Set device scale and animate 
  2. Framer.Device.setDeviceScale(0.5, true)

Device.contentScale <数字>

内容在自定义设备内的缩放比例，允许的范围是0.5到1。

  1. # Set content scale 
  2. Framer.Device.contentScale = 0.5

Device.setContentScale(scale, animate)

内容的缩放比例，允许的范围是0.5到1，这个函数会有一个额外的动画选项animation（true或false）。

  1. # Set content scale and animate 
  2. Framer.Device.setContentScale(0.5, true)

Device.orientation <数字>

设置设备的方向，允许的方向值是0到90（竖屏和横屏）。

  1. Framer.Device.orientation = 90

Device.setOrientation(orientation, animate)

设置设备的方向，允许的方向值是0到90（竖屏和横屏），这个函数会有一个额外的动画选项animation（true或false）。

  1. # Set orientation and animate 
  2. Framer.Device.setOrientation(90, true)

Device.orientationName <字符串>

通过名称来设定设备方向，合法的选项就是“portrait”和“landscape”两个。“portrait”和“landscape”分别和设置设备方向为0度90度相对应。

  1. # Set orientation to either landscape or portrait 
  2. Framer.Device.orientationName = "landscape"
  3. Framer.Device.orientationName = "portrait"

Device.rotateLeft()

向左旋转设备。

  1. Framer.Device.rotateLeft()

Device.rotateRight()

向右旋转设备。

  1. Framer.Device.rotateRight()