设计师开始制作原型的基本交互，也是现实世界基础的物理交互主要有：
- 点击（Tap）
- 滑动（Scroll）
- 按住（Hold）
- 轻扫（Swipe）
- 拖拽（Drag）
1. 点击
在 Framer Studio 中与点击相对应的是 Click，鉴于 Framer Studio 并不只是为手机制作原型的工具（可在任何基于 Webkit 的浏览器上进行交互），使用 Click 来表示点击显然是更加合理的。
当我们要完整走一次「点击交互」的时候，需要这些东西：
- 交互的图层（对象）
- 交互事件
- 交互的结果
在 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 告诉它具体做哪些性质的变化，即：
- 圆角大小变为 15
- 缩放 1.5 倍
- 旋转 180 度
- 为以上三个变化设定时间为 0.5 秒
- 变化曲线为 “ease”
最终效果：
亲自体验：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
