代碼模式 Code
先說(shuō)在Framer中用代碼創(chuàng)建交互的概念和一些簡(jiǎn)單的教程。
不用管你會(huì)啥不會(huì)啥先袍祖，我們做Framer的初衷就是希望它是一個(gè)好玩的工具。如果你已經(jīng)會(huì)HTML、CSS或者JS宾尚，那會(huì)用Framer就分分鐘的事兒。不會(huì)也別擔(dān)心谢澈，很多一點(diǎn)兒代碼都不會(huì)的設(shè)計(jì)師已經(jīng)用Framer創(chuàng)作了很多優(yōu)秀的作品了煌贴，可以作為提升自己的工具。接下來(lái)就是簡(jiǎn)簡(jiǎn)單單的入門(mén)教程啦～
還是先了解Framer中的概念锥忿，別怕牛郑，不是得先全部搞懂來(lái)之后才能上手。整個(gè)Framer的迭代歷史都是越來(lái)越簡(jiǎn)單敬鬓，越來(lái)越容易學(xué)淹朋。用的代碼是簡(jiǎn)化過(guò)的，并且有自動(dòng)代碼钉答，不對(duì)的也會(huì)馬上告訴你础芍，并且隨時(shí)可以查看幫助文檔。
流程 Workflow
在Framer中有三種方法添加交互数尿。在這段將Design模式和Code模式的關(guān)系仑性，怎么從其他設(shè)計(jì)軟件導(dǎo)入文件到Framer，并給圖層添加代碼右蹦。
推薦的方法
先在Design模式中組織圖層和元素诊杆。可以直接在畫(huà)板上繪制何陆，或者用設(shè)備專用畫(huà)板** 晨汹？** 。設(shè)計(jì)模式中的層次贷盲、布局淘这、分組可以和代碼模式無(wú)縫對(duì)接，可以同時(shí)在兩個(gè)模式中編輯晃洒，哪邊方便用哪邊慨灭。完成設(shè)計(jì)后，點(diǎn)圖層后的小藍(lán)點(diǎn)輸入圖層的名稱（提示 name for target）就可以在代碼模式中給圖層添加交互了球及。
了解更多關(guān)于指向Targeting氧骤，此處該有鏈接，先放個(gè)原文鏈接把
另一個(gè)方法
從Sketch吃引、Ps導(dǎo)入設(shè)計(jì)筹陵。圖層組也是可以導(dǎo)入的刽锤，在代碼中添加動(dòng)畫(huà)，在設(shè)計(jì)軟件中編輯朦佩。實(shí)時(shí)更新無(wú)縫對(duì)接并思。
還有一個(gè)不推薦的方法
在代碼中寫(xiě) ' layerA = new Layer` 添加圖層，定義圖層屬性语稠。但是你要是玩得溜也不能把你怎樣啊
預(yù)覽窗口 Preview Window
在代碼模式中有預(yù)覽窗口宋彼，也就是模擬屏幕的窗口，可以實(shí)時(shí)的預(yù)覽交互和動(dòng)畫(huà)（前提是得先定義交互和動(dòng)畫(huà)）仙畦。
這兒输涕，可以實(shí)時(shí)反饋你在設(shè)計(jì)模式中擺的圖層和代碼模式中寫(xiě)的交互。按 CMD + R 回到初始狀態(tài)慨畸。默認(rèn)狀態(tài)下預(yù)覽窗口吸附在Framer窗口的右側(cè)莱坎，也可以拖到Framer外面成為一個(gè)單獨(dú)的窗口〈缡浚「一段不知道指什么If you created your design directly on the canvas in Design, all of the layers you insert will not contain a parent artboard. Placing your layer on
the x: 0 and y: 0 position values will position the layer to the top left of the preview window.」
畫(huà)板 Artboards
在Framer中畫(huà)板可是響應(yīng)式的檐什。
代碼模式不是可以選設(shè)備么，選不同的設(shè)備弱卡，畫(huà)板中的元素還可以適配到不同的設(shè)備乃正。
設(shè)計(jì)應(yīng)用到代碼 Design to Code
直接在Framer中設(shè)計(jì)的頁(yè)面，可以完美的轉(zhuǎn)換成代碼婶博。每個(gè)畫(huà)板都被定義為一個(gè)父級(jí)烫葬，畫(huà)板內(nèi)的元素是子級(jí)。在代碼中定位父級(jí)就自動(dòng)定位里面的子級(jí)了凡蜻。像 FolwComponent （頁(yè)面切換？流程垢箕？）這樣的交互就很容易實(shí)現(xiàn)了划栓。
# 初始化 FolwComponent
flow = new FolwComponent
# 設(shè)置從畫(huà)板開(kāi)始流程
flow.showNext(ArtboardA)
#ArtboardA被點(diǎn)擊的時(shí)候
ArtboardA.onClick ->
#顯示下一個(gè)頁(yè)面（也就是畫(huà)板啦）
flow.showNext(ArtboardB)
#ArtboardB被點(diǎn)擊的時(shí)候
ArtboartB.onClick ->
#回到上一個(gè)頁(yè)面
flow.showPreviious()
