Framer(framerjs.com)如何入门?

framerjs.comFramer是一个开源项目,一个基于JavaScript的原型工具,专为设计师打造。现在的应用更注重交互设计,它可以让你效率更高。
关注者
1,015
被浏览
73,211
一位叫 David Lee 的交互设计师有写过一篇 New to Framer? Just 3 Things to Get You Started,感觉是目前来说比较易懂的入门 Framer 的文章。我节选了这篇教程最核心的内容加上自己的理解梳理成了中文,不是逐句翻译,所以英语好的同学还请直接看原文~


第一部分:首先得大概知道 Coffeescript 是什么(如果你已经很熟悉了,请忽略这部分)

Coffeescript 是你用 Framer 写原型时用的语言,这是一种写 JS 的更简单的方法。想了解它, 你需要知道这四点:

1. 赋值(assign)
等号「=」在编程语言里不是「等于」的意思,而是「赋值」,等号右边的值被赋给左边。如把 12 赋给 number:
number = 12

2. 变量(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 参考最新教程~