要是用过任何一个设计软件儿，那对图层的概念应该很熟悉了。没有给图层添加内容前，一个图层就是一个矩形。图层里也可以包含图片、视频、音频、文本等。
指定 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)
看完也不知道别的格式要咋定义啊！
网友评论