Framer教程 | 做一个酷酷的弹出式菜单

先看效果：

最终效果

我们分析一下这个效果，就是在点击圆形按钮时，弹出另外四个按钮。与此同时，这个触发按钮的颜色会变灰，里面的加号会旋转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'
#给触发按钮增加一个状态叫
greybtnAdd.states.add
    grey:
        backgroundColor: '#AAA'

接下来我们要把白色的加号放进触发按钮中，所以我们直接把加号拖进来，放到触发按钮正中间。因为它们是一体的，所以我们设置它的父图层为触发按钮“btnAdd”，只需要设置它的superLayer为btnAdd就可以啦。

同时也别忘了给他新增一个状态，让它旋转变成叉叉。

#创建加号
plus = new Layer
    superLayer: btnAdd
    width: 50
    height: 50
    image: "images/plus.png"
    y: 54
    x: 53
#给加号添加一个状态，叫
rotateplus.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()

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

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

最终效果

源码链接戳这里