练习素材：Sketch文件
在Google, Facebook, Twitter, Dropbox和其他许多公司工作的设计师，在设计过程中都会制作可交互原型。因为可交互原型弥补了我们以往经常忽略的设计部分--时间。另外还有很多其他制作可交互原型的理由。
制作交互原型有许多工具可以选择。如果你是一名开发人员，或者精通任意一种编程语言，那你的选择范围比其他人更广。但对于只熟悉WYSIWYG工具--Photoshop／Keynote的人来说，Framer就是那把开启神奇之门的密钥。
我周围的很多设计师都尝试学过Framer，但最后都以失败告终，这对没有一点编程基础的他们来说真是太难了。这在某种程度上说是真的，我也理解。但我认为，这不是最大的障碍。问题在于他们的观念。我不认为Framer很难学，只因为它是新生事物，所以看起来有点陌生和奇怪罢了。新生事物看起来总是很难。
Framer的出现是为了简化我们的生活，而不是为了折磨我们。如果你刚接触Framer，或曾经放弃过，这篇文章就是为你写的。为了让你快速入门，我会只解释3件最重要的事。
基础
在我详细解释这3件事之前，你需要先知道一些现代编程语言的常识。Framer 使用的编程语言CoffeeScript 是JacaScript（JS）的一种简易写法。我不说它简单，但是学会和掌握它是有很多好处的，因为JS是使用最广泛的一种计算机语言。所以你从Framer学到的技巧，也普遍适用于web场景。
关于CoffeeScript还有一些你需要知道的事情。如果你已经对编程语言的基础很熟悉了，你可以直接跳过这部分。
Assign赋值
“=”，在计算机语言中不表示等号，它表示赋值。右边的值被赋予左边。如：
number = 12
在这个例子中，numbe 的值是 12。如果你赋予它其他值，如0.1。那number的值就是0.1。
Variable变量
在上面的例子中，你可能很想知道number是什么。它叫做变量。其他编程语言，包括JS，在使用变量前，需要提前声明这是变量，如 var number = 12 或 int number = 12.但CoffeeScript不需要。在你第一次使用这个变量的时候，你可以直接在这个位置给变量命名。需要注意，变量名不能以数字开头，如2nd。
与其他计算机语言不同，CoffeeScript也没有变量类型。所以，你可以给变量赋予任何值。如整数、小数、字符串、数组、对象等。举个例子：
opacityValue = 1 #Integer type 整数类型
scaleValue = 1.2 #Float type 小数类型
howOld = "I am 12" #String type 字符串类型
Dot点
如果你导入Sketch设计文件到 Framer ，你会看到一行下面的文字（后面的部分我会详解 导入import 功能）：
example = Framer.importer.load("importer/example@2x")
你可以把 点 . 看作连接器 -- 你导入的文件example（变量） 和 其中的任意图层之间的连接器。举个例子，如果你想访问（或改变它的属性）上图的Circles 层，你可以这样写：
example.circles
但这是一个不完整的句子，它会报错。所以点 . 用来访问某一属性，然后给它赋值。你可以假设 Framer中的每一层（对象）都有它自己的属性，你可以使用 点 . 访问它。无论层处于文件中的哪一级，你都可以直接透过example访问它，就像下面这样：
example.circles.scale = 1.2
example.circle1.opacity = 0.5
example.circle1.roatation = 90
#opacity and rotation are the properties of layer circle.
#you don't need to do like this: example.circles.circle1.
Indentation缩进
缩进用来定义语言的结构，代替其他语言中的{ }，如JS。所以缩进行属于更高一级的行（缩进更少的一行）：
function = ->
layer.animate
properties:
opacity : 1
rotation : 90
#layer.animate belongs to function while properties: belongs to layer.animate,...
就是这样。
当然，你需要学习更多，但我想这对制作更多的过场和动效已经够用了。在这里你将会看到如何做。
Framer3要素
Framer官网的教程页对基础已经解释的很好了，但我还是尝试进行提炼阐述，以便于初学者学习。
动画的基本概念符合自然现象。如果你推（event 事件）某个物体（layer层），它会移动（state 状态变化）。所以如果你点击一个按钮，它的动作反馈，完全是根据你施加的力，或更简单的说，根据你事先规定的方式（state 状态）。
The 3 Things: Layer, Event, and State
所以你至少需要知道制作动画的3要素（Layer层、Event事件、State状态）State包含动画选项如运动速度。你会爱上这3者的结合。
Layer层
你可以直接在Framer中创建层，但我不推荐这种方式。因为你每创建一个层，都必须设置它的属性（如XY坐标，宽度高度、背景色／图片等）。我想在Sketch中设计和设置属性比在Framer中容易多了。另外，我想在Framer中专注交互动效，在Sketch中专注设计对你来说更好。
更简单的方式是这样的。你可以直接从Sketch中导入层（或从Photoshop中），Framer可以根据你在Sketch中的设置直接创建所有属性，你不需要再在Framer中修改一遍了。
如果你想改变某层的属性，你可以在sketch中修改后再导入一遍，或直接在Framer中修改（某种情况下直接在Framer中创建层更好，如果你想用特定的CSS变形效果，如动态圆角大小，这种情况在文章后半部分也会覆盖）。
在我们开始前，你需要在你的MAC系统中安装上Framer Studio。Windows或其他系统用户，你可以下载framer.js 合并到你常用的IDE中，如 Sublime Text 或 WebStorm。
FramerStudio 1.1界面
请下载这个Sketch文件，供后面的练习使用。
Import layers from Sketch从sketch中导入层
首先，导入Sketch 或 Photoshop文件到Framer中。直接点击左上角的Import 按钮，然后在弹出层里点击import Sketch按钮。只有当前在运行的应用，导入按钮是激活态。导入成功后，你会看到下面一行文字。你可以改变=左边的变量名。我把它改成了inbox，作为我们的样例：
inbox = Framer.Importer.load("imported/framer101_inbox@2x“)
现在你可以通过 变量inbox 访问sketch文件中的所有图层，并改变他们的属性。如下：
inbox.fab.scale = 1.2 # fab is floating action button
inbox.overlay.opacity = 0.5
这一步没有很多可以做的事，Framer已经通过导入sketch文件完成了这个艰巨的任务。
Event事件
下一步 你要考虑的，是要为图层增加什么事件。图层会开始监听你赋予的事件。在为图层增加事件之前，是不能和它交互的。
Framer支持很多输入事件监听，如Click点击、TouchStart触摸开始、TouchEnd触摸结束、Drag拖动、Scroll滚动等。通过名字你就知道这些事件的含义。我们一起来看Click点击事件和Touch触摸事件是如何工作的，它们是最常用的输入方式。
我们首先使用人类语言描述一下，我们想对图层做什么：
let this layer listen to click event.
(when click) do this.
转换成CoffeeScript语言：
inbox.fab.on Events.Click, -> # equivalent to inbox.fab.onClick ->
inbox.fab.opacity = 0
上面第一行代码，赋予了fab按钮监听点击事件的能力。第二行缩进行，定义了点击后完成什么动作。在这个例子中，这个按钮点击后会消失（opacity = 0 透明度变成0）。
你也可以将点击事件拆成2个独立部分，点击开始TouchStart（按下）／点击结束TouchEnd（释放）：
inbox.fab.on Events.TouchStart, ->
inbox.fab.opacity = 0
inbox.fab.on Events.TouchEnd, ->
inbox.fab.opacity = 1
在这个例子中，按钮会在你按下的时候消失，释放的时候重新出现。
你可能会想，.on／逗号，／箭头->／表示什么。但你可以先把它看作这是将一个事件赋予一个图层的方式。你可以使用同样的方式增加其他事件。(对还在思考的人，建议去Framer doc查看详细说明)
要检查Event是否生效，可以查看fab按钮的状态（透明度）。或者在定义Event具体的动作之前，也可以使用 Print 打印命令：
inbox.fab.on Events.Click, ->
print "clicked!"
Upon click, the FAB disappears and the message “clicked!” is printed.
State状态
现在你可以使图层响应点击事件了。但点击时按钮突然消失，并不符合常规。State是一个神奇的因素，这也是Framer强大的原因。
你可以简单的认为state是一个stateA和stateB之间预设的动画。在从sketch导入文件后，图层就有一个初始状态（stateA），你需要做的时候就是给它增加状态（stateB），举个例子：
inbox.fab.states.add
fadeout: # name of the state
opacity: 0
scale: 1.5
# indentation defines the structure (hierarchy and block).
新增加的是stateB--fadeout，stateA是默认状态default state（opacity：1，scale：1）
现在，你可以像下面一样应用fadeout状态给点击事件。当你点击按钮时，初始状态default state 变成 fadeout 状态。你可以看到这个变化，是不是很酷：
inbox.fab.on Events.Click, ->
inbox.fab.states.switch("fadeout")
# alternatively, you can use .next() instead of .switch("state").
但按钮变化过程和方式并不十分满意。因为它的动效是根据Framer的默认选项变化的。我们来改一下动效选项，如下：
inbox.fab.states.animationOptions = curve: "spring(300, 30, 0)"
有很多方式定义动效类型。但spring（弹性动画）是最自然的一种方式。所以大多数场景，你可以使用Spring代替linear（线性）或 ease（渐入渐出）。括号中的3个数值分别是 Tension张力、Friction摩擦、Velocity速度。我通常会调整tension和friction，而让velocity保持0.我先用（300，30，0）后面会调整它。你可以戳这里玩一下Noah Levin’s tutorial page。（FYI，@cemregungor通常用300，30，0，@jordandobson通常用500，50，0，@benjaminnathan使用400，30，0）
这就是Framer3要素--Layer层、State状态、Event事件，我想你已经可以上手制作真实的可交互原型了。
实例：Google Inbox
Google一年前发布了Material Design Guidelines。其中一个值得注意的设计组件是FAB（浮动操作按钮）。下面我们就为Google Inbox App的FAB按钮，制作一个过渡效果。这是我们将要制作的最终效果：
inbox 1-1
OK，我们现在就开始。首先花一分钟时间看下这个.Framer文件夹中的.sketch文件。这一步你应该像下面一样导入sketch文件：
首先，我们要隐藏这个圆形选项按钮和白色蒙层。然后，在点击FAB按钮时再显示。所以我们需要知道在sketch文件中这些图层的名字和结构。因为我们要在Framer中通过它们的名字访问它们。
它由4个一级图层组成（options,fab,overlay,bg）。我们想要访问并隐藏options和overlay图层，同时也需要隐藏FAB中的icon_wirte图标，让它点击时再显示。所以先对它们进行隐藏：
inbox.options.opacity = 0
inbox.overlay.opacity = 0
inbox.iconWrite.opacity = 0
# opacity 0 is transparent while 1 is completely opaque. So opacity's value is between 0-1.
在为FAB增加点击事件前，我们先定义一下相关的状态states。当点击FAB时，overlay白色蒙层和options圆形选项按钮需要出现。所以为它们增加出现状态：
inbox.overlay.states.add
on:
opacity:1
#equivalent to on:{ opacity:1 }
inbox.overlay.states.animationOptions = curve:"spring(300,30,0)"
or
inbox.overlay.states.on =
opacity : 1
animationOptions :
curve:"spring(300,30,0)"
inbox.options.states.on =
opacity : 1
animationOptions :
curve : "spring(300,30,0)
我们已经为图层 overlay 和options 定义了状态 on 。现在让这些状态在点击时生效：
inbox.fab.onClick ->
inbox.overlay.states.switch("on")
好了，现在要增加 当点击overlay时，让overlay隐藏：
inbox.overlay.onClick ->
inbox.overlay.states.switch("default")
我们并没有定义状态 default。但是我之前提到过，当增加一个新状态时，default状态会自动定义。所以我们可以说default状态时你导入Sketch文件时的状态（若你在增加新状态前，在Framer中又改变过默认状态，如上面一开始重新将opacity定义为0，则改变后的状态就为default状态）
现在我们对options图层增加同样的操作。然后就好啦！
虽然看起来简单，但现在失望还太早了。我们还有很多神奇的效果可以加进来。现在我们为wirte和plus icon增加旋转动效。
现在我们要使iconWrite旋转90度，之前我们已经将它的透明度设为0：
inbox.iconWrite.rotation = -90
然后我们为它增加一个状态。注意，我增加了tension张力值：
inbox.iconWrite.states.add
on:
opacity:1
rotation:0 #it will rotate 90 degrees clockwise
inbox.iconWrite.states.animationOptions = curve:"spring(500,30,0)"
or
inbox.iconWrite.states.on =
opacity: 1
rotation:0
animationOptions:
curve:"spring(500,30,0)"
然后，对新状态增加点击事件：
inbox.fab.onClick ->
inbox.iconWrite.states.switch("on")
inbox.overlay.onClick ->
inbox.iconWrite.states.switch("default")
对iconPlus，你可以像下面这样增加状态：
inbox.iconPlus.states.add
on:
opacity:0
rotation:90
inbox.iconPlus.states.animationOptions = curve:"spring(500,30,0)"
我们把上面这些整合在一起，就是下面这样：
我们还有另一个神奇魔法。我们来给圆形选项按钮增加缩放动效。你可以下载并查看另一个Framer file。
首先，为所有face图层设置初始缩放值为0.5：
initialFaceScale = 0.5
inbox.face1.scale = initialFaceScale
...
inbox.face5.scale = initialFaceScale
然后增加状态：
inbox.fece1.states.add
on:
scale:1
inbox.face1.states.animationsOptions = curve:"spring(500,30,0)"
然后为它增加点击事件。你可以根据需要为name图层增加一些垂直过场动效。就是这样啦！
如果你觉得上面的效果过于简单。那你可以看链接，来学习如何精简代码，并理解为什么Framer比其他工具更强大。
如果你还想学更多，那你可以给圆形选项图层增加更多的点击效果，下面是一个例子你可以自己练习：
要点总结
我希望你已经发现了在Framer中制作动效的通用模式，只需要记得3要素。你可以增加你能想到的任何效果。
1.设置层属性 Set properties of Layers
2.定义状态 Define States
3.增加交互事件 Add Events
欢迎各位对本文提出修正意见。如果有问题，你也可以移步Framer 社区，获取更多帮助：
https://www.facebook.com/groups/framerjs/
下一篇文章已经发布，你可以点击查看：Code Less & Achieve More with Arrays in Framer
网友评论