先看效果：
我們分析一下這個(gè)效果囤踩，就是在點(diǎn)擊圓形按鈕時(shí)珍特，彈出另外四個(gè)按鈕祝峻。與此同時(shí)，這個(gè)觸發(fā)按鈕的顏色會(huì)變灰，里面的加號(hào)會(huì)旋轉(zhuǎn)45度變成一個(gè)叉莱找，背景也會(huì)變模糊酬姆。
在Framer中，我準(zhǔn)備這樣實(shí)現(xiàn)它：初始狀態(tài)下四個(gè)按鈕在觸發(fā)按鈕之下被擋住奥溺，彈出狀態(tài)下四個(gè)按鈕彈出辞色，觸發(fā)按鈕背景變灰色，加號(hào)旋轉(zhuǎn)45度浮定，背景圖層變模糊相满。當(dāng)點(diǎn)擊觸發(fā)按鈕時(shí)，在初始狀態(tài)和彈出狀態(tài)之間切換桦卒。
我們先用PS準(zhǔn)備一下素材立美，主要就是背景、四個(gè)彈出的按鈕和一個(gè)加號(hào)闸盔。為什么觸發(fā)按鈕沒(méi)有直接做出來(lái)呢悯辙？因?yàn)樗谋尘吧珪?huì)變化琳省，我們直接用代碼來(lái)寫(xiě)會(huì)更好控制迎吵。
先把背景拖進(jìn)去，就是左邊那個(gè)列表针贬。這時(shí)在Framer左邊就會(huì)出現(xiàn)一段代碼击费，右邊也會(huì)出現(xiàn)這個(gè)背景圖（我按照iPhone6的大小做的，所以設(shè)備選擇iPhone剛好鋪滿(mǎn)）：
這段代碼會(huì)自動(dòng)新建一個(gè)圖層桦他，并以圖片名稱(chēng)命名蔫巩。但是現(xiàn)在我們要自己多寫(xiě)一段代碼，來(lái)給它添加一個(gè)菜單彈出時(shí)背景模糊的狀態(tài)：
#創(chuàng)建背景圖層
bg = new Layer
width: 750
height: 1334
image: "images/bg.png"
#給背景圖層新增一個(gè)狀態(tài)快压，叫bgBlur
bg.states.add
bgBlur:
blur:12
接下來(lái)畫(huà)觸發(fā)按鈕圆仔，起名為“btnAdd”，我們直接用代碼來(lái)寫(xiě)蔫劣。新建一個(gè)圖層賦給btnAdd坪郭，把它的寬高都設(shè)為156，圓角半徑設(shè)為邊長(zhǎng)的一半即78脉幢，背景色設(shè)為“#f75534”歪沃，就是紅色。
#創(chuàng)建觸發(fā)按鈕
btnAdd = new Layer
width: 156
height: 156
borderRadius: 78
backgroundColor: '#f75534'
然后點(diǎn)擊代碼左側(cè)的那個(gè)正方形小按鈕嫌松，切換到設(shè)計(jì)模式沪曙，在右側(cè)拖動(dòng)剛剛畫(huà)好的觸發(fā)按鈕到底部中間位置，它的代碼就會(huì)出現(xiàn)x萎羔、y兩個(gè)屬性液走，這是根據(jù)你拖動(dòng)的位置自動(dòng)計(jì)算出來(lái)的。需要注意的是，x缘眶、y坐標(biāo)值和我們平面幾何學(xué)過(guò)的不太一樣腻窒，這個(gè)坐標(biāo)系的原點(diǎn)是設(shè)備屏幕左上角那一點(diǎn)，向右為x軸正方向磅崭，向下為y軸正方向儿子。
現(xiàn)在看起來(lái)像這樣：
別忘了我們還要給他增加一個(gè)菜單彈出時(shí)變灰的狀態(tài)，所以代碼就變成這樣：
#創(chuàng)建觸發(fā)按鈕
btnAdd = new Layer
width: 156
height: 156
borderRadius: 78
backgroundColor: '#f75534'
#給觸發(fā)按鈕增加一個(gè)狀態(tài)叫
greybtnAdd.states.add
grey:
backgroundColor: '#AAA'
接下來(lái)我們要把白色的加號(hào)放進(jìn)觸發(fā)按鈕中砸喻，所以我們直接把加號(hào)拖進(jìn)來(lái)柔逼，放到觸發(fā)按鈕正中間。因?yàn)樗鼈兪且惑w的割岛，所以我們?cè)O(shè)置它的父圖層為觸發(fā)按鈕“btnAdd”愉适，只需要設(shè)置它的superLayer為btnAdd就可以啦。
同時(shí)也別忘了給他新增一個(gè)狀態(tài)癣漆，讓它旋轉(zhuǎn)變成叉叉维咸。
#創(chuàng)建加號(hào)
plus = new Layer
superLayer: btnAdd
width: 50
height: 50
image: "images/plus.png"
y: 54
x: 53
#給加號(hào)添加一個(gè)狀態(tài)，叫
rotateplus.states.add
rotate:
rotation: 45
剩下的四個(gè)彈出按鈕惠爽，一個(gè)個(gè)添加會(huì)很麻煩癌蓖，代碼也會(huì)很長(zhǎng)。這時(shí)候代碼的優(yōu)勢(shì)就體現(xiàn)出來(lái)啦婚肆！我們使用一種神奇的魔法叫做“循環(huán)”租副。
所謂循環(huán)，就是重復(fù)地做一件事情较性，這里就是重復(fù)地創(chuàng)建一個(gè)圖層用僧，把它的背景設(shè)為一張圖片，同時(shí)按位置擺放好赞咙。
在循環(huán)之前责循，我們先寫(xiě)一句btn = [ ]，表明btn現(xiàn)在是一個(gè)數(shù)組攀操，里面可以存放一組東西院仿，用它來(lái)存放這四個(gè)按鈕。
接下來(lái)崔赌，繼續(xù)寫(xiě)上for i in [0..3]意蛀，表示開(kāi)始數(shù)數(shù)，并用i記錄下當(dāng)前數(shù)字健芭，而數(shù)數(shù)的范圍是0到3县钥，一共四個(gè)。為什么從0開(kāi)始呢慈迈？這個(gè)小孩沒(méi)娘若贮，說(shuō)來(lái)話(huà)長(zhǎng)省有，我們先不說(shuō)，反正你就記著計(jì)算機(jī)數(shù)數(shù)都是從0開(kāi)始谴麦。
然后按tab鍵縮進(jìn)一格蠢沿，在這里新建一個(gè)圖層，寬高和觸發(fā)按鈕一樣都設(shè)為156匾效，坐標(biāo)x和坐標(biāo)y也和觸發(fā)按鈕一樣舷蟀。這里使用的是btn[i]來(lái)存每一次創(chuàng)建的圖層，表示btn數(shù)組第i個(gè)元素是某一個(gè)圖層面哼。
# 創(chuàng)建四個(gè)按鈕
btn[i] = new Layer
width: 156
height: 156
x:297
y:1136
但是圖片要名稱(chēng)要?jiǎng)討B(tài)變化了野宜，還記得上面說(shuō)的數(shù)到幾就用i記下來(lái)，所以我們用"images/btn"+i+".png"來(lái)表示當(dāng)前圖片魔策。加號(hào)在這里表示連接字符匈子，例如當(dāng)數(shù)到最后一個(gè)的時(shí)候，i等于3,上面圖片鏈接就變成了“images/btn3.png”闯袒。
image: "images/btn"+i+".png"
記得圖片要命名成btn0虎敦、btn1、btn2政敢、btn3才可以被正確讀取其徙。
緊接著我們要給這四個(gè)按鈕每一個(gè)都加一個(gè)狀態(tài)popUp，所以接在后面寫(xiě)下這段代碼：
btn[i].states.add
popUp:
x:297
y: i*176+428
可以看到堕仔，y也是動(dòng)態(tài)計(jì)算的擂橘，因?yàn)閺棾鰰r(shí)四個(gè)按鈕縱向的坐標(biāo)都是不一樣的。最終摩骨，這四個(gè)按鈕的代碼是：
btn = []
#創(chuàng)建四個(gè)按鈕
for i in [0..3]
btn[i] = new Layer
width: 156
height: 156
x:297
y:1136
image: "images/btn"+i+".png"
#給每個(gè)按鈕添加新?tīng)顟B(tài)
btn[i].states.add
popUp:
x:297
y: i*176+428
記得把這一段代碼移到觸發(fā)按鈕的代碼前面，這樣最開(kāi)始它們才可以被觸發(fā)按鈕擋住朗若。
最后一步恼五，就是添加觸發(fā)事件了。點(diǎn)擊左上角的“+”哭懈，選擇Event->btnAdd->Click->Click就會(huì)加上一段代碼：
btnAdd.onClick (event, layer) ->
我們只需要接在后面寫(xiě)上各個(gè)圖層的狀態(tài)切換到下一個(gè)的代碼灾馒，就可以了。
#點(diǎn)擊按鈕遣总，觸發(fā)按鈕變灰色睬罗，加號(hào)旋轉(zhuǎn)，彈出菜單旭斥，模糊背景
btnAdd.onClick (event, layer) ->
bg.states.next()
btnAdd.states.next()
plus.states.next()
btn[0].states.next()
btn[1].states.next()
btn[2].states.next()
btn[3].states.next()
這樣我們就完成了這個(gè)彈出式菜單容达，但是點(diǎn)擊時(shí)彈出菜單的效果可能和下面的效果不太一樣，你需要自己微調(diào)一下彈性曲線(xiàn)垂券，我設(shè)置的是spring(90,13,10)花盐，你可以把下面這幾行代碼放在最開(kāi)頭，慢慢去試。
Framer.Defaults.Animation = curve: "spring(90,13,10)"
源碼鏈接戳這里
