美文网首页
Framer 小技巧合集 (近期持续更新ing)

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

作者: Yokiijay | 来源:发表于2019-02-26 14:52 被阅读0次

    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 直接居中于容器

    相关文章

      网友评论

          本文标题:Framer 小技巧合集 (近期持续更新ing)

          本文链接:https://www.haomeiwen.com/subject/fuqayqtx.html