Framer（framerjs.com）如何入门？
一位叫 David Lee 的交互设计师有写过一篇
New to Framer? Just 3 Things to Get You Started，感觉是目前来说比较易懂的入门 Framer 的文章。我节选了这篇教程最核心的内容加上自己的理解梳理成了中文，不是逐句翻译，所以英语好的同学还请直接看原文~
—
第一部分：首先得大概知道 Coffeescript 是什么（如果你已经很熟悉了，请忽略这部分）
Coffeescript 是你用 Framer 写原型时用的语言，这是一种写 JS 的更简单的方法。想了解它， 你需要知道这四点：
1. 赋值（assign）
等号「=」在编程语言里不是「等于」的意思，而是「赋值」，等号右边的值被赋给左边。如把 12 赋给 number：
number = 122. 变量（variable）
在上面的例子中，number 就叫「变量」。Coffeescript 中，这样给各种变量赋值：
opacity_value = 1 #整型
scale_value = 1.2 #浮点型
how_old = "I am 12." #字符串型3. 点（dot）
当你导入一个 Sketch 文件到 Framer 时（这个后面例子会讲到），你会看到这么一行代码：
example = Framer.Importer.load "imported/example"假设 example.sketch 中有 circles 这个图层组，那么你就可以通过「点」来取到它：
example.circles上面这个句子是不完整的，你取到了这个变量，就可以对它的属性进行一些操作：
example.circles.opacity = 0.5 #将这个 circles 图层的透明度设置为 0.5
4. 缩进（indent）
Coffeescript 中的缩进是用来定义语言结构的，不同于 JS 中使用的 { } 花括号。缩进的行之间是从属关系。举个栗子：
function = ->
layer.animate
properties:
opacity: 1
rotation: 90
# layer.animate 属于 function，而 properties: 属于 layer.animate, ...第二部分：边上手边理解 Framer 的三个核心概念
我们知道，动画是基于现实生活中的现象的，比如：如果你推动（事件）某个东西（图层），它就会动（状态变化）。用 Framer 做原型动画就是用代码来实现这个过程，所以理解了这三个概念，你就可以很快上手啦~
概念 1. 图层（layer）
你可以在 Framer 里直接创建一个个的图层，但更简洁且优雅的方式是直接从 Sketch 导入。现在，下载这个文件
framer101_inbox.sketch，跟着作者的例子来一步步实践吧。
先把实例代码清空，用 Sketch 打开下载的文件，在 Framer 中导入（Import），现在你就可以看到窗口右边出现了示例文件，左边出现了一行代码。你可以改变这行代码的变量名，作者把它改成了 「inbox」，也就是：
inbox = Framer.Importer.load "imported/framer101_inbox"现在你就可以对这些图层为所欲为啦，长什么样子，在什么位置，都由你决定，比如：
inbox.fab.scale = 1.2 # fab 是 floating action button 的缩写
inbox.overlay.opacity = 0.5概念 2. 事件（Event）
有了图层，我们就可以对它进行操作了。Framer 支持 Click，TouchStart，TouchEnd，Drag，Scroll 等事件。
先用人类语言来形容一下我们想对图层做什么：
让这个图层监听点击事件。
（当点击的时候）做这件事。如果我们把这个描述翻译为 Coffeescript 的语言就是：
inbox.fab.on Events.Click, ->
inbox.fab.opacity = 0第一行代码将让按钮（fab）准备好被 Click，第二行缩进的代码定义了 Click 后会发生什么（fab 的透明度变为 0，也就是消失）。当然，你要是不嫌烦也可以分开写：
inbox.fab.on Events.TouchStart, ->
inbox.fab.opacity = 0
inbox.fab.on Events.TouchEnd, ->
inbox.fab.opacity = 1你可能很疑惑 「.on」「, ->」都是些什么鬼东西。其实在初期你不需要深入理解，可以把它看做是将一个事件赋值给图层的方法，以后添加事件都按照这个套路来就行啦。
如果你想检查下添加的事件是不是起作用了，你可以用 print 打印些文字，如果你做了相应的操作后能正常输出就说明起作用了。
inbox.fab.on Events.Click, ->
print "clicked!"
概念 3. 状态（State）
现在你已经有了一个能响应点击事件的图层了，但是它是突然消失的，不太自然，这时就需要「状态」来帮忙，这个概念也是 Framer 最厉害的部分啦。
一个最简单的动画包含两个状态：A 和 B，通常当你从 Sketch 导入动画时就已经包含了一个图层的初始状态 A，现在你需要添加一个状态 B，比如：
inbox.fab.states.add
fadeout: # 状态的名称：淡出
opacity: 0
scale: 1.5
然后把淡出（fadeout）状态应用到上面已经写好的点击事件里吧~
inbox.fab.on Events.Click, ->
inbox.fab.states.switch("fadeout")
# 这里的 .switch("fadeout") 可以替换为 .next().这时，当你点击 fab 时，就可以看到它淡出消失了。
淡出的过渡还是有些生硬对吧？让我们用 Framer 自带的 Spring 来定义一下过渡的弹性曲线：
inbox.fab.states.animationOptions = curve: "spring(300, 30, 0)"spring 括号里的三个值分别代表：
张力、摩擦力、速度，可摸索调整到你最满意的数值效果。
嘭！一个最基本的 Framer 动画原型就做好啦！
到这里就基本算入门 Framer 了 p( ^ O ^ )q
—
其实用 Framer 做原型前的 Sketch 文件也是一个比较重要的部分。比如你得知道 Framer 只能识别到 Sketch 中的图层组，也就是说，Sketch 里的单个图层是不能在 Framer 中取到并进行操作的。这些作者在文中没有提及，关于这一点更多内容可参考
Framer - Sketch Tips。至于 Sketch 中元素的组织技巧，可以通过下载别人的例子（Sketch + Framer 源文件）研究学习。
入门后就不停地写啊玩啊尽情折腾吧，碰到问题就去捋官方文档，或者去
facebook 的 Framer小组里讨论。
加了个油！
—
注：2016 年 Framer 有一次比较大的更新，这篇文章里的实例某些部分可能已不再适用，但基础知识部分是通用的。想学习 Framer 的同学可到 Framer - Resources 参考最新教程~