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