framer-docs
framer-docs
framercn.com
Framer
start
资源
设计模式
代码模式
编程知识
协作
docs
基本
align
backgroundLayer
canvas
color
defaults
device
gradient
layer
screen
textLayer
svgLayer
svgPath
svgGroup
videoLayer
动画&状态
事件
组件
其它
Powered by GitBook

device

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

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

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

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

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

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

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

# Set the Device position 
Framer.Device.screen.x = 50
Framer.Device.x = 50
​
# Change from the current Device position 
Framer.Device.screen.x += 50
Framer.Device.x += 50

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

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

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

Device.deviceType <字符串>

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

Fullscreen

全屏显示。

Framer.Device.deviceType = "fullscreen"

iPhone 6s

各种颜色的iPhone 6s。

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

iPhone 6+

各种颜色的iPhone 6plus。

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

iPhone 5s

各种颜色的iPhone 5s。

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

iPhone 5c

各种颜色的iPhone 5c。

Framer.Device.deviceType = "apple-iphone-5c-blue"
Framer.Device.deviceType = "apple-iphone-5c-green"
Framer.Device.deviceType = "apple-iphone-5c-red"
Framer.Device.deviceType = "apple-iphone-5c-white"
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。

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

iPad Pro

各种颜色的iPad Pro。

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

Apple Watch 38mm

各种颜色的Apple Watch 38mm。

Framer.Device.deviceType = "apple-watch-38mm-gold-black-leather-closed"
Framer.Device.deviceType = "apple-watch-38mm-rose-gold-black-leather-closed"
Framer.Device.deviceType = "apple-watch-38mm-stainless-steel-black-leather-closed"
​
Framer.Device.deviceType = "apple-watch-38mm-black-steel-black-closed"
Framer.Device.deviceType = "apple-watch-38mm-gold-midnight-blue-closed"
Framer.Device.deviceType = "apple-watch-38mm-rose-gold-lavender-closed"
​
Framer.Device.deviceType = "apple-watch-38mm-sport-aluminum-blue-closed"
Framer.Device.deviceType = "apple-watch-38mm-sport-aluminum-fog-closed"
Framer.Device.deviceType = "apple-watch-38mm-sport-aluminum-green-closed"
Framer.Device.deviceType = "apple-watch-38mm-sport-aluminum-red-closed"
Framer.Device.deviceType = "apple-watch-38mm-sport-aluminum-walnut-closed"
Framer.Device.deviceType = "apple-watch-38mm-sport-aluminum-white-closed"
Framer.Device.deviceType = "apple-watch-38mm-sport-space-gray-black-closed"

Apple Watch 42mm

各种颜色的Apple Watch 42mm。

Framer.Device.deviceType = "apple-watch-42mm-gold-black-leather-closed"
Framer.Device.deviceType = "apple-watch-42mm-rose-gold-black-leather-closed"
Framer.Device.deviceType = "apple-watch-42mm-stainless-steel-black-leather-closed"
​
Framer.Device.deviceType = "apple-watch-42mm-black-steel-black-closed"
Framer.Device.deviceType = "apple-watch-42mm-gold-midnight-blue-closed"
Framer.Device.deviceType = "apple-watch-42mm-rose-gold-lavender-closed"
​
Framer.Device.deviceType = "apple-watch-42mm-sport-aluminum-blue-closed"
Framer.Device.deviceType = "apple-watch-42mm-sport-aluminum-fog-closed"
Framer.Device.deviceType = "apple-watch-42mm-sport-aluminum-green-closed"
Framer.Device.deviceType = "apple-watch-42mm-sport-aluminum-red-closed"
Framer.Device.deviceType = "apple-watch-42mm-sport-aluminum-walnut-closed"
Framer.Device.deviceType = "apple-watch-42mm-sport-aluminum-white-closed"
Framer.Device.deviceType = "apple-watch-42mm-sport-space-gray-black-closed"

Nexus

谷歌各个版本的Nexus设备。

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

HTC One A9

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

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

HTC One M8

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

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

Microsoft Lumia 950

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

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

Samsung Note 5

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

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

Device.fullScreen <布尔值>

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

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

Device.deviceScale <数字 / 字符串>

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

Framer.Device.deviceScale = 0.5

Device.setDeviceScale(scale, animate)

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

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

Device.contentScale <数字>

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

# Set content scale 
Framer.Device.contentScale = 0.5

Device.setContentScale(scale, animate)

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

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

Device.orientation <数字>

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

Framer.Device.orientation = 90

Device.setOrientation(orientation, animate)

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

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

Device.orientationName <字符串>

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

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

Device.rotateLeft()

向左旋转设备。

Framer.Device.rotateLeft()

Device.rotateRight()

向右旋转设备。

Framer.Device.rotateRight()
Previous
defaults
Next
gradient
Last updated 1 year ago
Edit on GitHub
Contents
Device.customize(deviceType, screenWidth, screenHeight, deviceImage, deviceImageWidth, deviceImageHeight, devicePixelRatio)
Device.deviceType <字符串>
Fullscreen
iPhone 6s
iPhone 6+
iPhone 5s
iPhone 5c
iPad Mini
iPad Air
iPad Pro
Apple Watch 38mm
Apple Watch 42mm
Nexus
HTC One A9
HTC One M8
Microsoft Lumia 950
Samsung Note 5
Device.fullScreen <布尔值>
Device.deviceScale <数字 / 字符串>
Device.setDeviceScale(scale, animate)
Device.contentScale <数字>
Device.setContentScale(scale, animate)
Device.orientation <数字>
Device.setOrientation(orientation, animate)
Device.orientationName <字符串>
Device.rotateLeft()
Device.rotateRight()