練習素材：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 狀態）。
所以你至少需要知道制作動畫的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。
請下載這個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!"
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按鈕，制作一個過渡效果。這是我們將要制作的最終效果：
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
