图层 Layers丨Framer 文档 Code

Code

要是用过任何一个设计软件儿，那对图层的概念应该很熟悉了。没有给图层添加内容前，一个图层就是一个矩形。图层里也可以包含图片、视频、音频、文本等。

指定 Inserting & Targeting

插入图层跟在设计模式中画个东西，再切回代码模式一样简单。
在设计模式中添加了图层并指定 targetable 后，就已经开始写代码了。要定位在Framer中添加的图层，只用给图层插入名称，添加要添加的图层。

# 给my_layer图层指定一个动画
my_layer.animate
  y: 200
  options:
    time: 1
   curve: Bezier.ease

属性 Properties

图层在Framer中属性种类还是挺多的。所有的属性都可以直接用代码写。在设计模式中创建的图层定义属性后，在代码模式中还可以覆盖原来的属性的。比如设计模式创建了画板A，并且给背景填充了红色，在代码模式中你可以再覆盖成蓝色：

A.backgroundColor = "#28affb"

浏览窗口中看到的背景色就变成了蓝色。

图层的属性都可以做成可交互动画，定义两个不同的角度、缩放值、透明度就可以实现旋转、缩放、隐藏等。

# 图层layerB的圆角4pt
layerB.borderRadius = 4

# 图层layerB的角度是45度
layerB.rotation = 45

# 图层layerB的不透明度是50%
layerB.opacity = 0.5

# 图层layerB的缩放是50%大
layerB.scale = 0.5

一个熟悉图层属性的方法是使用自动代码，自动代码什么意思呢，就是说Framer已经把动画、交互等变成了选项，只需要从窗口最左侧的 Animate、State、Event、Snippet里选中你需要的动画、状态、事件等，代码那儿就会自动写好你刚选的操作和属性。

位置 Positioning

图层位置可以直接使用x、y定义，这俩属性是指图层左上那点到屏幕左上的距离。

# 图层layerA的位置
layerA.x = 200
layerA.y = 200

图层也可以用动态属性定位。假设你想定图层B相对与图层A的位置，又不想手动计算俩图层的中心点，可以用 midX、midY这类属性，文档中又全部关于定位属性的说明。

# 图层B的X轴对齐图层A的x轴中心 
layerB.x = layerA.midX
 
# 图层B的y轴对齐图层A的y轴中心 
layerB.y = layerA.midY

用 Align 属性可以在父层级内居中（center），如果图层没有父级那使用Align 标签时对齐的是屏幕。parent-child（父级 - 子级）层级关系可以在设计模式中定义，代码模式中同样可以覆盖。图层还可以只定水平方向或垂直方向的相对位置。下面是所有的对齐属性：

Align.left (x)
Align.right (x)
Align.top (y)
Align.bottom (y)
Align.center (x and y)

# layerB 父级是 layerA 
layerB.parent = layerA
 
# 定义 layerB 对齐父级的右下角 
layerB.x = Align.right
layerB.y = Align.bottom

层级 Hierarchy

设计模式中的组对应代码模式中的层级，同样代码模式中的层级可以覆盖设计模式中的层级。被放在一个图层中的图层是子级 child，上层容器是父级 parent，图层从父层级继承属性，如不透明度、位置。

# 两个方法定义层级：layerB的父级是layerA、layerA添加一个子级layerB
layerB.parent = layerA
layerA.addChild(layerB)

如果需要把一个图层放在另一个图层的前面，可以用placeBefor，放在后面用 placeBehind。

layerA = new Layer
layerB = new Layer
 
# layerB 在 LayerA 上面 
layerB.placeBefore(layerA)

暂时没看到啥变化

图层类型 Layer Types

图层几乎可以是背景、图片、视频、文字等等。在设计模式中可以添加标准图层（就是指容器啦），然后在设计模式中将视频、音频插入到图层。
例如要插入一个视频，直接将文件拖拽到Framer的代码编辑其中。

# 视频
video = new VideoLayer
  video: "fish.mp4"

文本图层 Text Layers

可以直接在设计模式中添加文本，要给文本添加交互改变文字或颜色之类的，在代码模式中用 TextLayer 图层。文本图层又自己的属性，宽度高度可以自动计算也可以手动设置，取决于文字和样式。

# 新建一个文本图层
title = new TextLayer
  text: "Hello!"

基本上文字样式来源CSS。全部属性查看文档。

# 创建文本图层
title = new  TextLayer
  text: "Hello!"
  fontSize: 64
  fontWeight: 600
  x: Align.center
  y: Align.center

可以用强大的模版控制文字的某一部分，或者做动画。用{ }标签框出文本的值。

# 用模板标签创建文本图层，speed 是可以被替换的值
layerA = new TextLayer
  text: "{speed}KM/h"

# 再设置要用一个什么值替换 speed 
layerA.template =
  speed: 50

# 如果只有一个值可以用这个写法，如果是有多个值就必需用的写法，不然不知道对应的值是什么
layerA.template = 50

# 用这个两个写法预览窗口中都会显示 "50KN/h"

文本模版还可以用来设置固定的格式和计算各种值。

# 创建个文本图层模板，这次来定两个值
  layerA = new TextLayer
  text："{speed}{unit}/h"

# 设置模板的格式，值有两位小数点
layerA.templateFormatter =
  speed: (value) ->
    Utils.round(value, 2)

# 值的动画从 0 到 100
layerA.animate
  template:
    speed: 100
    unit: "KM"

单个标签可以用简写

layerA.templateFormatter = (value) ->
  Utils.round(value, 2)

看完也不知道别的格式要咋定义啊！