写给设计师看的 Framer JS —— 基础物理交互（一）

1. 本文所有图文（除了网页截图）皆为原创，版权完全归我本人所有。如有未经允许的「任何部分或全部」的转载、抄袭、盗用，全部默认为：您已同意并接受给我本人 3 万元。本文「发布」时间：2015 年 11 月 06 号 22:22。
2. 本系列文章将直接从实践角度出发，本着「写完一篇文章再砍掉一半」的原则，不必要的解释和说明没有展开。
3. 阅读前请精读 Framer JS 官网的 Learn 并在阅读中配合官方文档实时查阅。
4. 本系列文章将不定期连载，最终制作成电子书，名为《写给设计师看的 Framer JS》
5. 需要体验效果就请点击链接，�支持任何基于 Webkit 的浏览器，不区分平台和设备。

设计师开始制作原型的基本交互，也是现实世界基础的物理交互主要有：

• 点击（Tap）
• 滑动（Scroll）
• 按住（Hold）
• 轻扫（Swipe）
• 拖拽（Drag）

1. 点击

在 Framer Studio 中与点击相对应的是 Click，鉴于 Framer Studio 并不只是为手机制作原型的工具（可在任何基于 Webkit 的浏览器上进行交互），使用 Click 来表示点击显然是更加合理的。

当我们要完整走一次「点击交互」的时候，需要这些东西：

1. 交互的图层（对象）
2. 交互事件
3. 交互的结果

在 Framer Studio 中它是这样的：

# step 1
layer = new Layer
    width: 200
    height: 200
    borderRadius: 100
    backgroundColor: "#39f"

layer.center()

# step 2
layer.on Events.Click, ->
    # step 3
    layer.animate
        properties: 
            borderRadius: 15
            scale: 1.5
            rotation: 180
        time: 0.5
        curve: "ease"

• Step 1：新建一个图层，设定好宽高度、圆角大小和颜色
• Step 2：给图层 layer 新建一个点击事件
• Step 3：设定点击事件的结果

xxx.on Events.Click, -> 是固定写法，区分大小写。-> 即 Function，中文意思是「函数」。我们用经典的 y = f(x) 来解释：

在一个变化过程中，有两个变量 x、y，如果给定一个 x，相应的就确定唯一的一个 y，那么就称 y 是 x 的函数，其中 x 是自变量，y 是因变量

回到我们的代码（牢记 Framer 以缩进来表示继承关系），Step 2 下、-> 前的一行代码就是自变量 x，-> 后Step 3 下的所有代码就是因变量 y。故 layer 的 Click 事件就是 x，因 Click 而引起 layer 的一系列变化就是 y。layer.animate 是告诉 Framer 对 layer 做一些动效，properties 告诉它具体做哪些性质的变化，即：

1. 圆角大小变为 15
2. 缩放 1.5 倍
3. 旋转 180 度
4. 为以上三个变化设定时间为 0.5 秒
5. 变化曲线为 “ease”

最终效果：

GIF 帧数问题无法还原实际顺滑效果

亲自体验：http://share.framerjs.com/y8nr4jrg6cg1/

疑问来了，为什么要多输入不必要的代码呢？为啥不可以这样：

layer.on Events.Click, ->
    layer.borderRadius = 15
    layer.scale = 1.5
    layer.rotation = 180

原因是：这样的变化是没有过程的。上面的代码没有通过 animate 去实现变化，故其不可设定变化时间、变化曲线、变化次数等等。也就是说，它是立即生效的，我们不想要没有自然过渡的动效。这是上面代码的呈现效果：

没有过渡的变化

亲自体验：http://share.framerjs.com/npm8moz0w4ok/

下一篇讲解如何实现更加复杂、更加符合真实场景的点击交互效果。

欢迎关注我的 dribbble：https://dribbble.com/Acmenyz