我们先分析一下这个效果：在点击圆形按钮时，弹出另外四个按钮。与此同时，这个触发按钮的颜色会变灰，里面的加号会旋转45度变成一个叉，背景也随之变模糊。

在Framer中，我准备通过状态转换来实现它。这个动效只有两个状态——弹出时和收起时，分别如下：

收起时：收起状态下四个子按钮在触发按钮下面，被它挡住。触发按钮为红色，显示为加号。

弹出时：弹出状态下四个子按钮被弹出，触发按钮背景变灰色，加号旋转45度变成叉号，背景图层变模糊。

当点击触发按钮时，就在收起状态和弹出状态之间切换。

我们先用PS准备一下素材，主要就是背景、四个弹出的按钮和一个加号。为什么触发按钮没有直接做出来呢？因为它的背景色会变化，我们直接用代码来写就可以控制它的背景色了。

先把背景拖进去，就是左边那个列表。这时在Framer左边就会出现一段代码，右边也会出现这个背景图（我按照iPhone6的大小做的，所以设备选择iPhone刚好铺满）：

这段代码会自动新建一个图层，并以图片名称命名。但是现在我们要自己多写一段代码，来给它添加一个菜单弹出时背景模糊的状态：

#创建背景图层
bg = new Layer
    width: 750
    height: 1334
    image: "images/bg.png"
#给背景图层新增一个状态，叫bgBlur
bg.states.add
    bgBlur:
        blur:12

接下来使用代码绘制触发按钮，给其起名为“btnAdd”。新建一个图层赋给btnAdd，把它的宽、高都设为156，圆角半径设为边长的一半即78，背景色设为“#f75534”，就是红色。

#创建触发按钮
btnAdd = new Layer
    width: 156
    height: 156
    borderRadius: 78
    backgroundColor: '#f75534'

然后点击代码左侧的那个正方形小按钮，切换到设计模式，在右侧拖动刚刚画好的触发按钮到底部中间位置，它的代码就会增加x、y两个属性，这是根据你拖动的位置自动计算出来的。需要注意的是，x、y坐标值和我们平面几何学过的不太一样，这个坐标系的原点是设备屏幕左上角那一点，向右为x轴正方向，向下为y轴正方向。

现在看起来像这样：

别忘了我们还要给他增加一个弹出时变灰的状态，所以它的代码就变成这样：

#创建触发按钮
btnAdd = new Layer
    width: 156
    height: 156
    borderRadius: 78
    backgroundColor: '#f75534'
#给触发按钮增加一个状态叫grey
btnAdd.states.add
    grey:
        backgroundColor: '#AAA'

接下来我们要把白色的加号放进触发按钮中，所以我们直接把它拖进来，放到触发按钮正中间。因为它们是一体的，所以我们设置它的父图层为触发按钮“btnAdd”，只需要设置它的superLayer为btnAdd就可以啦。同时也别忘了给他新增一个状态rotate，让它旋转变成叉叉。

#创建加号
plus = new Layer
    superLayer: btnAdd
    width: 50
    height: 50
    image: "images/plus.png"
    y: 54
    x: 53
#给加号添加一个状态，叫rotate
plus.states.add
    rotate:
        rotation: 45

剩下的四个弹出按钮，一个个添加会很麻烦，代码也会很长。这时候代码的优势就体现出来啦！我们使用一种神奇的魔法叫做“循环”。

所谓循环，就是重复地做一件事情，这里就是重复地创建一个图层，把它的背景设为一张图片，同时按位置摆放好。

在循环之前，我们先写一句btn = [ ]，表明btn现在是一个数组，里面可以存放一组东西，用它来存放这四个按钮。

接下来，继续写上for i in [0..3]，表示开始数数，并用i记录下当前数字，而数数的范围是0到3，一共四个。为什么从0开始呢？这个小孩没娘，说来话长，我们先不说，反正你就记着计算机数数都是从0开始。

然后按tab键缩进一格，在这里新建一个图层，宽高和触发按钮一样都设为156，坐标x和坐标y也和触发按钮一样。这里使用的是btn[i]来存每一次创建的图层，表示btn数组第i个元素是某一个图层。

# 创建四个按钮
btn[i] = new Layer
    width: 156
    height: 156
    x:297
    y:1136

但是图片要名称要动态变化了，还记得上面说的数到几就用i记下来，所以我们用"images/btn"+i+".png"来表示当前图片。加号在这里表示连接字符，例如当数到最后一个的时候，i等于3,上面图片链接就变成了“images/btn3.png”。

image: "images/btn"+i+".png"

记得图片要命名成btn0、btn1、btn2、btn3才可以被正确读取。

紧接着我们要给这四个按钮每一个都加一个状态popUp，所以接在后面写下这段代码：

btn[i].states.add
    popUp:
        x:297
        y: i*176+428

可以看到，y也是动态计算的，因为弹出时四个按钮纵向的坐标都是不一样的。最终，这四个按钮的代码是：

btn = []
#创建四个按钮
for i in [0..3]
     btn[i] = new Layer
        width: 156
        height: 156
        x:297
        y:1136
        image: "images/btn"+i+".png"
     #给每个按钮添加新状态
     btn[i].states.add
        popUp:
            x:297
            y: i*176+428

记得把这一段代码移到触发按钮的代码前面，这样最开始它们才可以被触发按钮挡住。

最后一步，就是添加触发事件了。点击左上角的“+”，选择Event->btnAdd->Click->Click就会加上一段代码：

btnAdd.onClick (event, layer) ->

我们只需要接在后面写上各个图层的状态切换到下一个的代码，就可以了。

#点击按钮，触发按钮变灰色，加号旋转，弹出菜单，模糊背景
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()

这样我们就完成了这个弹出式菜单，但是点击时弹出菜单的效果可能和demo的效果不太一样，你需要自己微调一下弹性曲线，我设置的是spring(90,13,10)，你可以把下面这几行代码放在最开头，慢慢去试，直到你觉得看起来舒服为止。

Framer.Defaults.Animation = curve: "spring(90,13,10)"

获取源文件地址请戳这里

本文为原创，转载请联系