Framer 指南：從設計到編程、組件及其它

原文：blog.framer.com/framer-tuto…
做者：Wojciech Dobry
翻譯：Jun

看下面這兩個很 cool 的原型，它們都是使用 Framer 製做的。是否是也想作一個？沒問題，看完這篇文章你就會使用 Framer 來設計本身的原型了。

當你在原型中須要作一些精準的邏輯或者要實現一些特殊效果時，Framer 是不二之選，儘管它不是那麼容易上手。不過如今不同了，最近 Framer 發佈了一個全新版本，新增了設計模式，你能夠直接在 Framer 中設計你的原型並經過代碼給它添加功能，在這個過程當中你不須要任何第三方軟件和其餘的編程技巧。

來吧，讓我教你如何使用 Framer 來寫簡單的代碼邏輯，即便你沒接觸過編程也不要緊。你將會學會如何充分結合設計和代碼的優點來設計製做一個可交互原型，並學會使用一些代碼讓你的原型更加有趣。

Framer 基礎

在開始以前，你須要先下載試用軟件，若是你是壕已經購買了就當我沒說。若是你尚未買，能夠先下載試用再作決定。試用版有兩週的時間並且可使用它全部的功能，這個時間絕對夠你入門了。

安裝好以後，歡迎頁面上會有一些示例項目，你能夠進去把玩把玩。OK，看完了嗎？咱們要開始寫原型了哦。

（在這一次的教程中，我會直接使用 Framer 進行界面設計，儘管它還提供了諸如 Sketch 、Figma 導入和直接代碼實現的方式。）

Framer 新版本——設計模式

在這篇教程裏面，咱們將會在幾分鐘內使用最少的代碼來完成這三個很酷的原型😎：基本交互動做、滾動組件和頁面組件。

最新版 Framer 有一個很牛逼的特性：設計模式，它可讓你像在 Sketch 或 Figma 中那樣進行可視化設計。你能夠畫矢量圖形、導入圖像、或者是建立一個文字圖層並調節它的樣式。若是你性子比較急不想在幾個軟件中切換的話就能夠直接在 Framer 中進行快速設計。

開始界面設計:

在第一部分，咱們先要設計一個最基本的界面。這個界面的設計包括三種不一樣類型的圖層：矢量圖層、圖片圖層和文字圖層。

第一步: 建立一個小按鈕和背景

請先切換到設計模式，添加一個畫板，就像在 Sketch 中同樣。本篇教程裏，咱們將會使用 iPhone 7 大小的畫板（買不起只能在這裏畫畫了），這就是個人畫板默認大小了。同時，我給它填充了藍色的背景。

接下來，使用矩形工具在下方中間畫一個簡單的圓形按鈕。

第二步：建立一張圖像卡片

咱們直接從電腦的文件夾裏面選一張圖片拖到 Framer 中，並使用右邊的屬性調節調整一下他的樣式。我用了一張簡單插畫，調整了投影什麼的讓它看起來像一張卡片。

第三步：添加標題

Framer 也支持添加文字圖層，就像在其餘設計軟件中同樣，你能夠選擇字體、字號、對齊方式、字間距等。

第四步：告訴 Framer 哪些圖層是可交互的

畫完了全部圖層在給 Framer 添加交互動畫以前，咱們還有最後一步：咱們須要告訴 Framer 哪些圖層是可交互的。點擊圖層面板中圖層名稱右側的圓環（靶子圖標），給想要添加動畫的圖層改個名字以在代碼中使用。爲了長遠考慮最好給每個圖層起一個有意義的名字，我給給它倆取名爲 card 和 button 。

第五步：定義一些全局的顏色變量

一個好的編程習慣是在開始前給原型定義一些全局變量。你能夠定義一組顏色、基本的字號行高，或者畫布尺寸等，這會幫助你節約後面的工做時間。

當你想好須要哪些顏色以後，就能夠在代碼編輯器中給他們都起個名字，而後使用 = 給它們賦一個值，能夠是 HEX 、RGB 或者 RGBa 格式的色值。請注意這些變量定義必定要放在最前面。

# 變量 -------------------------------
blue = "#005D99"
green = "#3DBE8B"
white = "#FFFFFF"複製代碼

第六步：添加相對位置

在新版的 Framer 中，讓你的原型支持響應式很簡單。你能夠在設計模式下設置圖層的相對位置，就像下面這樣：

這裏有一些經常使用的方法，幫助你在代碼中對齊或者計算圖層位置。若是你想讓你的原型是響應式的並在以後添加一些交互效果時會發現這頗有用。

# 這些代碼教你如何對齊圖層
x: Align.center(0) # 水平居中對齊圖層
x: Align.center(200) # 在水平居中向右偏移200px處
x: Align.right(0)
x: Align.left(0)

y: Align.center(0) # 垂直居中對齊圖層
y: Align.top(0)
y: Align.bottom(0)
# 你也可使用一些變量
width: Screen.width # 當前設備寬
height: Screen.height # 當前設備高
# 固然你也可使用圖層名來引用該圖層的座標
x: layerA.x # layerA 水平位置
y: layerA.y # layerA垂直方向 位置
width: layerA.width # layerA 的寬度
height: layerA.height # layerA 的高度
# 你還能夠結合這些，進行一些數學計算
    width: Screen.width / 2 - layerA.width複製代碼

都搞定啦？開始吧

如今咱們在 Framer 中已經建立了好幾個圖層，是時候開始咱們的交互部分了。

好開心，比較枯燥的過程都完啦，如今是時候開始處理交互了。你能夠從這裏先下載原文件。

1. 建立按鈕反饋動效

在設計任何動效以前，咱們都須要想清楚這個動效是怎樣被觸發的。可使一個用戶的點擊、一個動畫的完成、一張圖片的加載完畢或者手機陀螺儀的變化。

第一步：建立交互事件

先來個簡單點的，咱們假設是在你點擊以後觸發的按鈕動效，能夠像下面這樣添加一段代碼：

layerA.onTap (event, layer) ->複製代碼

Framer 會自動添加這段代碼，它的意思是當你點擊按鈕圖層時，會發生一些事情。

第二步：給事件添加動畫

咱們設置好觸發事件以後，須要給它添加一個動畫。點擊圖層面板中按鈕圖層右邊的圓環，選擇「添加動畫」，Framer 就會轉到動畫編輯模式下，此時你能夠縮放、移動、旋轉或者改變任意其它屬性。

在這個時候 Framer 會自動在後面添加幾行代碼。（不要擔憂，你仍是能夠在動畫面板中調節它的）

button.onTap (event, layer) ->
    button.animate
        borderRadius: 27
        borderWidth: 10
        borderColor: "rgba(115,250,121,1)"
        options:
            time: 0.30
            curve: Bezier.ease複製代碼

恭喜你！你已經使用 Framer 建立了人生中第一個交互動畫。不過這個交互效果只能被觸發一次，不要緊，後面我會說怎麼修復。之因此只有一次的緣由是咱們沒有定義動畫完成以後的事件，其實當點擊動效完成時，咱們應該讓按鈕的各項屬復原。

第三步：復原動畫屬性。

咱們來添加另一個事件以中止動畫：

寫下這麼一行代碼：

button.onAnimationEnd (event, layer) ->複製代碼

接着添加代碼，讓按鈕進行另外一個動畫來複原各項屬性。

button.onAnimationEnd (event, layer) ->
    button.animate
        borderWidth: 100
        borderColor: "rgba(255,255,255,1)"
        borderRadius: 100
        options:
            time: 0.3
            curve: Bezier.ease複製代碼

搞定啦！如今咱們就有了一個可交互的按鈕。

按鈕反饋動效

二、給卡片建立不一樣的狀態用於交互

好了，如今你知道了如何給圖層添加動畫並使用一些事件來觸發動畫，可是多數狀況下咱們是經過給圖層添加不一樣狀態來實現動畫效果的。你能夠給一個圖層添加多個狀態，在每個狀態下都有着不一樣的屬性，如位置、尺寸、透明度等。

第一步：給卡片圖層添加狀態

給圖層添加狀態和給圖層添加動畫差很少，點擊圖層面板該圖層名稱右側的圓環，而後點擊「添加狀態」。如今你進入了圖層狀態編輯模式，接下來就能夠改變圖層在該狀態下的樣式了。

請注意代碼的縮進，這一次咱們要頂着代碼編輯區左側開始寫。

在這個例子裏，我給卡片圖層添加了兩個不一樣狀態。

card.states.a =
    width: 248
    height: 287
    x: 63
    y: 190
    borderWidth: 10
    borderColor: "rgba(115,250,121,1)"
card.states.b =
    x: 139
    y: 529
    width: 98
    height: 98
    borderRadius: 49
    borderWidth: 1
    borderColor: "rgba(255,255,255,1)"複製代碼

第二部：添加事件

添加好不一樣的狀態以後，咱們須要一個事件觸發圖層在不一樣狀態間切換才能夠看到效果。我咱們一塊兒來建立觸發事件吧：

button.onTap ->
    card.stateCycle()複製代碼

這段代碼所作的工做，就是在咱們每次點擊時按順序輪流循環切換狀態。若是你想要切換到某個肯定的狀態，能夠用下面這段代碼：

button.onTap ->
    card.stateSwitch("b")複製代碼

但是看了一下效果我不太滿意，感受不是很完美，因此我又調整了一下兩個狀態之間過渡動畫的速度和運動曲線。

card.animationOptions =
    curve: Spring
    time: 0.8複製代碼

iPhone 原型的狀態轉換交互

使用事件你能夠幹不少事情，目前爲止你已經學會了如何建立一些基本的交互。不過想要作一些複雜的事件交互仍是有點難度的，但請不要懼怕，Framer 中文文檔裏面通常都能找到答案。

組件：加快你的工做流程

是時候使用 Framer 組件來加快你的工做流程了。爲了更好地理解這篇教程，請先下載該示例源文件：framer.cloud/WTySI。

我對這個原型作了一點點修改。如今這個原型裏面有一個很長的列表，它的內容已經超出設備屏幕了，致使咱們看不全。不要緊，咱們想個辦法把它變成能夠滾動的。

第一步：建立圖層並設置組件

咱們先建立一個比屏幕還要長的圖層，而後把它變成代碼目標並命名爲 list 。接着切換到代碼模式，這一次咱們不使用左側的調節工具而是直接使用代碼來調節這個圖層是指能夠滾動。

scroll = new ScrollComponent
    width: Screen.width
    height: Screen.height複製代碼

這段代碼建立了一個和當前屏幕同樣大的不可見區域。

第二步：告訴Framer你想滾動哪一個圖層

啥事兒都沒發生對吧？由於咱們尚未告訴 Framer 讓哪一個圖層滾——————動。很簡單，咱們只須要把 list 圖層添加爲滾動組件的內容（ content ）就能夠啦。

list.parent = scroll.content複製代碼

第三步：只容許縱向滾動

試一試，如今是否是能夠滾動啦？可是好像能夠隨意滾動，可咱們只想上下滾動啊喂，那咱們就想個辦法禁止橫向滾動吧。

scroll.scrollHorizontal = false複製代碼

滾動組件

哇！有沒有發現你居然只寫了5行代碼就實現了一個不算簡單的原型，比開發哥哥都厲害。

二、頁面組件: 從一屏滑向另外一屏

在頁面組件中，Framer 讓你能夠一屏屏滑動，停下時會固定卡在一個位置不動。

使用頁面組件時，Framer 讓你能夠一屏屏滑動，停下時會自動停留在某個頁面不動。

能夠用頁面組件實現的比較流行的交互效果是滑動切換屏幕，和這個原型相似，你能夠下載它把玩把玩：framer.cloud/icddT。

第一步：設置頁面組件

首先咱們應該先在代碼編輯器中用頁面組件畫一個盒子，一個裝滿了黑魔法的盒子。

page = new PageComponent
    width: 315
    height: Screen.height
    x: Align.center
    scrollVertical: false
    clip: false # 超出組件尺寸的內容不會被隱藏複製代碼

看這段代碼應該不是很陌生吧？和上面咱們設置滾動組件同樣，在這裏咱們建立了一個頁面組件並對其進行初始的設置，如今咱們往裏面添加一些圖層用來滑動。

第二步：建立圖層

我比較懶，因此我將會繼續使用第一個原型中的設計圖。不過有點不一樣的是，這一次咱們導入兩張圖片。

首先咱們把畫板變成以前的兩倍寬。在畫板屬性面板中，找到寬度 width 並把它乘以 2（在後面加上 *2 ）。把這兩張卡片挨着放在一塊兒，同時給它們添加代碼目標，一個叫 card1 另外一個叫 card2 。

第三步：把圖層添加進頁面組件

在剛纔的代碼後面，加上這兩行：

card1.parent = page.content
card2.parent = page.content複製代碼

它的意思是把這兩個圖層添加進頁面組件。

頁面組件容許你在不一樣頁面間滑動，橫向縱向均可以

頁面組件容許你在不一樣頁面間滑動，橫向縱向均可以。此時你已經完成了這個頁面切換的原型。

最後

這一片指南就是這些內容，但願這篇教程能夠幫助你入門 Framer ——這款最強大的原型設計工具。你也能夠加入 Facebook 小組，在這裏會有不少人幫助你。

想要更深刻的學習，你能夠閱讀 Framer 中文網裏面的內容，訂閱豆瓣閱讀專欄《 Framer 原型設計指南》，或關注公衆號 codesigner。