之前的Framer教程都是按照個(gè)人喜好去寫(xiě)的趴生，沒(méi)有按照難易程度形成系列短蜕。為了讓大家能更好地入門(mén)杠河，我準(zhǔn)備由易到難寫(xiě)一個(gè)系列教程碌尔，盡量保持在每周一篇的頻率。
導(dǎo)讀：圖層在Framer中是一個(gè)很基礎(chǔ)的元素券敌，同時(shí)也是很重要的一個(gè)概念唾戚。這篇教程將講述如何定義圖層，如何通過(guò)圖層屬性來(lái)定義其外觀樣式待诅，以及圖層之間的層級(jí)關(guān)系叹坦。
在使用Framer制作原型時(shí)幾乎處處都要使用圖層，它可以是一張圖片咱士，一段文字立由，或者是一個(gè)視頻。Framer提供的一些封裝好的組件如翻頁(yè)組件序厉、滑動(dòng)組件等锐膜，也是由圖層構(gòu)成的。在設(shè)計(jì)軟件諸如Photoshop和Sketch中我們經(jīng)常和圖層打交道弛房，其實(shí)Framer中的圖層和它們類(lèi)似道盏，比如他們都有前后位置關(guān)系、都可以自定義描邊文捶、圓角荷逞、背景色，只是在Framer中圖層是通過(guò)代碼“畫(huà)”出來(lái)的粹排。
現(xiàn)在在Framer中創(chuàng)建圖層可以很方便的使用左上角的“插入”工具种远，選擇layer就會(huì)在代碼區(qū)域生成一行代碼layerA = new Layer，表示圖層創(chuàng)建成功顽耳，同時(shí)在右邊預(yù)覽區(qū)會(huì)出現(xiàn)一個(gè)200×200的半透明黑色正方形坠敷。
new表示指令“新建”妙同，Layer（注意首字母大寫(xiě)）表示圖層對(duì)象。整句話(huà)翻譯過(guò)來(lái)就是“新建一個(gè)圖層對(duì)象膝迎，把它賦值給變量layerA”粥帚，那么在后面的代碼中l(wèi)ayerA就代表這個(gè)圖層了。layerA是系統(tǒng)默認(rèn)生成的變量名限次，你也可以改成你喜歡的名字芒涡。程序員常常開(kāi)的玩笑“找不到對(duì)象怎么辦？自己new一個(gè)啊”就來(lái)源于此卖漫。
那我們?cè)撛鯓佑肍ramer畫(huà)這個(gè)播放器呢费尽？
先把它拆分為四個(gè)元素——擺針、轉(zhuǎn)軸懊亡、唱片和底盤(pán)依啰。需要注意的是，我們并不是使用Framer來(lái)畫(huà)這一整個(gè)播放器店枣，因?yàn)镕ramer只適合一些扁平化的形狀。術(shù)業(yè)有專(zhuān)攻叹誉，這個(gè)播放器是擬物化的鸯两，所以我們還是使用設(shè)計(jì)軟件來(lái)制作比較復(fù)雜的部件——擺針和唱片，至于底盤(pán)和轉(zhuǎn)軸比較簡(jiǎn)單长豁，我們就使用Framer來(lái)繪制（其實(shí)都用設(shè)計(jì)軟件制作是最好的钧唐，這里只是為了講解圖層才這么干）。
先插入一個(gè)圖層匠襟，要達(dá)到這種效果钝侠，我們要對(duì)這個(gè)圖層做以下幾點(diǎn)：設(shè)置淺灰色描邊、把直角變成圓角酸舍、把背景設(shè)為白色帅韧、增添陰影。
你可以使用中間可視化設(shè)計(jì)區(qū)域去調(diào)節(jié)啃勉。如下忽舟，白色的數(shù)字就是經(jīng)我調(diào)整過(guò)的，你可以根據(jù)自己的感覺(jué)慢慢調(diào)節(jié)直到效果滿(mǎn)意為止淮阐。
當(dāng)然叮阅，你也可以直接修改左側(cè)代碼以實(shí)現(xiàn)這種樣式。只需要在new Layer的下一行按tab鍵縮進(jìn)之后給它寫(xiě)上一系列屬性名和屬性值的定義即可泣特，這些屬性如果有不知道的可以在文檔里面查閱浩姥。對(duì)于距離來(lái)說(shuō)不用單位，默認(rèn)為像素（px）状您，顏色則需要使用引號(hào)括起來(lái)表示是字符串勒叠，支持十六進(jìn)制和rgba等格式兜挨，你可以在設(shè)計(jì)軟件中取色后從調(diào)色板獲得其色值。
底盤(pán)完成后缴饭，我們?cè)倮L制轉(zhuǎn)軸暑劝。轉(zhuǎn)軸其實(shí)就是一個(gè)描邊的圓形：
它的代碼是這樣的：
接下來(lái)就是把擺針和唱片拖進(jìn)來(lái)，移動(dòng)到對(duì)應(yīng)的位置并縮放到合適的大小颗搂，代碼我就不貼了担猛。最后是這樣的：
這時(shí)候就有個(gè)問(wèn)題：這個(gè)播放器在屏幕左上角，我們想把它拖到正中間丢氢，卻發(fā)現(xiàn)Framer只能一個(gè)圖層一個(gè)圖層的拖動(dòng)傅联，好不方便。能不能把它作為一個(gè)整體來(lái)拖動(dòng)呢疚察？我們可以使用圖層的層級(jí)來(lái)解決這個(gè)問(wèn)題蒸走，我們新建一個(gè)圖層base，作為這四個(gè)圖層的父圖層貌嫡，那么拖動(dòng)base時(shí)它們就會(huì)被整體拖動(dòng)啦比驻。
插入新圖層，改名為base岛抄。因?yàn)槲覀儾恍枰匆?jiàn)它别惦，只是把它作為一個(gè)隱形的父圖層，所以把它的背景色改為透明的夫椭。
接著在最后加入這么四行代碼：
之前我們說(shuō)過(guò)“.”這個(gè)符號(hào)可以翻譯成“的”掸掸，那么這幾行代碼的意思就是圖層tray的父圖層（superLayer）是圖層base，等等蹭秋。此時(shí)他們的x和y屬性是相對(duì)于base圖層的左上角的扰付，而不再相對(duì)于設(shè)備屏幕左上角。
這時(shí)候在中間的圖層關(guān)系樹(shù)中可以看到仁讨，swing羽莺、shaft、disc和tray都比base縮進(jìn)一格陪竿，表示它們是base的子圖層禽翼。這時(shí)候點(diǎn)擊base代碼塊左邊的方形按鈕切換到設(shè)計(jì)模式，拖動(dòng)base圖層你會(huì)發(fā)現(xiàn)它們會(huì)被作為一個(gè)整體來(lái)拖動(dòng)族跛。
其實(shí)你也可以使用這種方式對(duì)圖層的屬性進(jìn)行覆蓋闰挡，比如tray.borderColor = "blue"就可以覆蓋前面定義好的描邊顏色屬性，使其變?yōu)樗{(lán)色礁哄。
Framer圖層就講到這里长酗，那些屬性不知道不記得都沒(méi)關(guān)系，重在不斷試用桐绒《崞ⅲ回憶一下本篇的內(nèi)容：
1.圖層是由它的一系列屬性來(lái)決定其外觀樣式的之拨，我們可以通過(guò)代碼修改它的屬性也可以直接在設(shè)計(jì)區(qū)域改動(dòng)屬性；
2.圖層之間可以有層級(jí)關(guān)系咧叭，移動(dòng)父圖層其子圖層也會(huì)跟著移動(dòng)昌粤；
3.圖層的屬性可以使用“.”的方式來(lái)進(jìn)行定義或覆蓋屈雄。
點(diǎn)擊這里獲取源代碼和圖片素材稳吮，試著自己做一下裹驰，下回我們繼續(xù)使用這個(gè)播放器講解Framer的狀態(tài)。
