Framer 小技巧合集 (近期持续更新ing)

Framer对象下的常用属性

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

# Override the default background color for layers 
Framer.Defaults.Layer.backgroundColor = "red"
 
# Override the default corner radius for layers 
Framer.Defaults.Layer.borderRadius = 10

Framer.Defaults.Animation =
    curve: Spring(damping: 0.75)

• Framer.Device.screen.background = 'red' 设置设备默认背景底色，相当于body,注意screen和Screen的区别

Screen

• Screen.backgroundColor
• Screen.size 输出屏幕的 {width:xxx,height:xxx}
• Screen.frame 输出屏幕的 {width,height,x,y}
• Screen.convertPointToLayer(point, layer) 把point的{x,y}转化为相对于layer的{x,y}

Layer 一些容易被忽视的常用属性和方法

• layer.name
• layer.point
• layer.midPoint
• layer.size
• layer.frame 获取相对容器的{x,y,width,height}
• layer.screenFrame 获取相对屏幕的{x,y,width,height}
• layer.pixelAlign() 在动画结束后调用可以对齐像素
• layer.select(name) 选中名为name的layer
• layer.selectChild(name) 选中layer下名为name的元素
• layer.selectAll(name)
• layer.selectAllChildren(name)
• layer.index = xxx 设置layer的z-index
• layer.bringToFront() 提到当前容器的最顶层
• layer.sendToBack() 降到当前容器的最底层
• layer.copy() 复制当前layer
• layer.animationOptions()
• layer.stateNames 打印state的数组
• layer.point = Align.center 直接居中于容器