之前的Framer教程都是按照个人喜好去写的，没有按照难易程度形成系列。为了让大家能更好地入门，我准备由易到难写一个系列教程，尽量保持在每周一篇的频率。

导读：图层在Framer中是一个很基础的元素，同时也是很重要的一个概念。这篇教程将讲述如何定义图层，如何通过图层属性来定义其外观样式，以及图层之间的层级关系。

在使用Framer制作原型时几乎处处都要使用图层，它可以是一张图片，一段文字，或者是一个视频。Framer提供的一些封装好的组件如翻页组件、滑动组件等，也是由图层构成的。在设计软件诸如Photoshop和Sketch中我们经常和图层打交道，其实Framer中的图层和它们类似，比如他们都有前后位置关系、都可以自定义描边、圆角、背景色，只是在Framer中图层是通过代码“画”出来的。

现在在Framer中创建图层可以很方便的使用左上角的“插入”工具，选择layer就会在代码区域生成一行代码layerA = new Layer，表示图层创建成功，同时在右边预览区会出现一个200×200的半透明黑色正方形。

new表示指令“新建”，Layer（注意首字母大写）表示图层对象。整句话翻译过来就是“新建一个图层对象，把它赋值给变量layerA”，那么在后面的代码中layerA就代表这个图层了。layerA是系统默认生成的变量名，你也可以改成你喜欢的名字。程序员常常开的玩笑“找不到对象怎么办？自己new一个啊”就来源于此。

那我们该怎样用Framer画这个播放器呢？

先把它拆分为四个元素——摆针、转轴、唱片和底盘。需要注意的是，我们并不是使用Framer来画这一整个播放器，因为Framer只适合一些扁平化的形状。术业有专攻，这个播放器是拟物化的，所以我们还是使用设计软件来制作比较复杂的部件——摆针和唱片，至于底盘和转轴比较简单，我们就使用Framer来绘制（其实都用设计软件制作是最好的，这里只是为了讲解图层才这么干）。

先插入一个图层，要达到这种效果，我们要对这个图层做以下几点：设置浅灰色描边、把直角变成圆角、把背景设为白色、增添阴影。

你可以使用中间可视化设计区域去调节。如下，白色的数字就是经我调整过的，你可以根据自己的感觉慢慢调节直到效果满意为止。

当然，你也可以直接修改左侧代码以实现这种样式。只需要在new Layer的下一行按tab键缩进之后给它写上一系列属性名和属性值的定义即可，这些属性如果有不知道的可以在文档里面查阅。对于距离来说不用单位，默认为像素（px），颜色则需要使用引号括起来表示是字符串，支持十六进制和rgba等格式，你可以在设计软件中取色后从调色板获得其色值。

底盘完成后，我们再绘制转轴。转轴其实就是一个描边的圆形：

它的代码是这样的：

接下来就是把摆针和唱片拖进来，移动到对应的位置并缩放到合适的大小，代码我就不贴了。最后是这样的：

这时候就有个问题：这个播放器在屏幕左上角，我们想把它拖到正中间，却发现Framer只能一个图层一个图层的拖动，好不方便。能不能把它作为一个整体来拖动呢？我们可以使用图层的层级来解决这个问题，我们新建一个图层base，作为这四个图层的父图层，那么拖动base时它们就会被整体拖动啦。

插入新图层，改名为base。因为我们不需要看见它，只是把它作为一个隐形的父图层，所以把它的背景色改为透明的。

接着在最后加入这么四行代码：

之前我们说过“.”这个符号可以翻译成“的”，那么这几行代码的意思就是图层tray的父图层（superLayer）是图层base，等等。此时他们的x和y属性是相对于base图层的左上角的，而不再相对于设备屏幕左上角。

这时候在中间的图层关系树中可以看到，swing、shaft、disc和tray都比base缩进一格，表示它们是base的子图层。这时候点击base代码块左边的方形按钮切换到设计模式，拖动base图层你会发现它们会被作为一个整体来拖动。

其实你也可以使用这种方式对图层的属性进行覆盖，比如tray.borderColor = "blue"就可以覆盖前面定义好的描边颜色属性，使其变为蓝色。

Framer图层就讲到这里，那些属性不知道不记得都没关系，重在不断试用。回忆一下本篇的内容：

1.图层是由它的一系列属性来决定其外观样式的，我们可以通过代码修改它的属性也可以直接在设计区域改动属性；
2.图层之间可以有层级关系，移动父图层其子图层也会跟着移动；
3.图层的属性可以使用“.”的方式来进行定义或覆盖。

点击这里获取源代码和图片素材，试着自己做一下，下回我们继续使用这个播放器讲解Framer的状态。