Framer之图层 | 一起来画个音乐播放器

之前的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的状态。

推荐阅读更多精彩内容