本教程翻譯自prototypingwithframer入偷，作者Kenny Chen追驴，用戶體驗(yàn)設(shè)計(jì)師。prototypingwithframer是Kenny的博客疏之，會(huì)不定期的分享他使用Framer的教程和心得殿雪。
在Framer社區(qū)里經(jīng)常會(huì)被提起的一個(gè)問題是：Windows電腦用戶如何使用Framer？目前為止锋爪，F(xiàn)ramer軟件只有Mac版本丙曙，但是其核心引擎Framer.js框架卻是免費(fèi)和開源的。這意味著如果你使用的是Windows其骄、Linux系統(tǒng)亏镰，或者使用Mac但暫時(shí)還沒有購買軟件的打算，你仍然可以創(chuàng)建Framer原型拯爽。
對(duì)于大多數(shù)人來說索抓，我們期望盡可能少的做一些配置工作，Atom就是為此而生的毯炮。Atom是Github（Github是最受歡迎的代碼托管網(wǎng)站）旗下的免費(fèi)代碼編輯器逼肯，你可以通過簡單的設(shè)置來自由定制一些功能用以處理復(fù)雜的任務(wù)。
Framer.js是使用Javascript編寫的桃煎，而Framer軟件內(nèi)編程使用的是CoffeeScript篮幢，它和Javascript有略微的不同，但最終都會(huì)被編譯成Javascript为迈。你看到的很多Framer示例原型都是使用CoffeeScript寫的洲拇，如果你想要深入了解奈揍，可以把代碼轉(zhuǎn)換成Javascript，使用Framer.js運(yùn)行它赋续。
通過Atom男翰，我們可以簡單的使用CoffeeScript來創(chuàng)建Framer原型并在Windows、Linux和Mac設(shè)備上預(yù)覽纽乱。讓我們開始吧蛾绎！
1、下載并安裝Atom
打開Atom官網(wǎng)鸦列，找到下載按鈕租冠，在不同系統(tǒng)上應(yīng)該會(huì)顯示不同的格式。
如果你使用的是Mac薯嗤，下載的是zip文件顽爹，解壓后把它移到應(yīng)用程序文件夾里，就可以運(yùn)行啦骆姐。
如果你是用的是Windows系統(tǒng)镜粤，運(yùn)行安裝器，安裝成功之后就可以打開啦玻褪。
如果你是用的是Linux系統(tǒng)肉渴，下載并安裝Debian或RPM安裝包。
2带射、安裝插件包
當(dāng)你第一次啟動(dòng)Atom同规，你看到的應(yīng)該是導(dǎo)覽頁。
點(diǎn)擊右側(cè)面板中的“Install a Package”按鈕窟社，打開插件安裝器券勺。
此時(shí)就會(huì)出現(xiàn)插件安裝器的界面。在以后你也可以通過Preferences->Install進(jìn)入插件安裝器灿里。
搜索“coffee-compile”插件包并安裝它关炼。它能夠保存你的CoffeeScript代碼并將其轉(zhuǎn)化成Javascript。你會(huì)發(fā)現(xiàn)搜索結(jié)果中有很多類似的插件钠四，應(yīng)該都能用但我沒有試過盗扒。
搜索“atom-html-preview”插件包并安裝它跪楞，它的作用是讓你在改動(dòng)代碼時(shí)實(shí)時(shí)查看效果缀去。
安裝完成后再次點(diǎn)擊Packages標(biāo)簽，會(huì)發(fā)現(xiàn)Community Packages一欄多了兩個(gè)你剛剛安裝的插件甸祭。
3缕碎、更新插件設(shè)置
如果你已經(jīng)安裝好coffee-compile插件，點(diǎn)擊Settings按鈕池户，勾選“Compile on Save without Preview”選項(xiàng)咏雌，這樣就會(huì)在你保存文件時(shí)自動(dòng)編譯凡怎，而不會(huì)讓你看到Javascript文件。
4赊抖、下載Framer.js項(xiàng)目模板
你可以在這里下載項(xiàng)目模板，或者去Framer.js的github主頁進(jìn)入“Get Started”這一段，點(diǎn)擊下載按鈕下載调鬓。
下載完成之后卦尊，解壓文件并打開這個(gè)Framer文件夾。
Framer Generator是一個(gè)和Framer.js打包在一起的Mac應(yīng)用程序报亩，它可以讓你直接導(dǎo)入Photoshop和Sketch文件浴鸿，這是Framer Studio的特性。
下面解釋一下這些文件分別都是做什么用的：
/framer/framer.js?—?這就是你創(chuàng)建交互動(dòng)效原型的核心引擎弦追，一般不要?jiǎng)铀懒矗悄阋鎿Q一個(gè)新版本。
/framer/framer.js.map****?—這是資源地圖文件劲件。這些文件記錄著從源文件到壓縮的最終文件的位置路徑掸哑，方便你調(diào)試壓縮文件。就像framer?.js文件一樣寇仓，一般也不用動(dòng)它举户。
/images/background.png & /images/icon.png?—?這個(gè)icon圖標(biāo)用在了默認(rèn)的原型里，背景圖片是CSS代碼里用到的的黑色背景遍烦。
app.js?—?如果你要使用JavaScript來編寫原型俭嘁，這就是你要編輯的文件。不過一般我們都是直接寫CoffeeScript代碼服猪，再編譯生成這個(gè)文件供填。
index.html?—?使用一個(gè)WebKit內(nèi)核的瀏覽器（谷歌的Chrome瀏覽器或蘋果的Safari）打開這個(gè)文件，來預(yù)覽你的原型罢猪。它引用了前面提到的framer.js和app.js文件近她。
5、在Atom中打開該項(xiàng)目文件夾
點(diǎn)擊菜單欄中的File –> Add Project Folder 打開剛才的項(xiàng)目文件夾膳帕。
6粘捎、將app.js重命名為app.coffee
右擊app.js文件，選擇rename將其重命名危彩。
將文件后綴名從 .js (JavaScript) 改成 .coffee (CoffeeScript)攒磨。
7、開始寫你的CoffeeScript代碼吧
因?yàn)閍pp.js里的代碼是Javascript汤徽，所以先刪掉它∶溏郑現(xiàn)在你可以打開app.coffee來編寫CoffeeScript代碼啦。如果你還不知道如何開始谒府，復(fù)制并粘貼下面這段示例代碼先熟悉一下拼坎。
# Prototyping with Framer
# 創(chuàng)建背景圖層
new BackgroundLayer backgroundColor: "#151517"
# 使用Framer logo創(chuàng)建一個(gè)圖層
logo = new Layer
width: 128
height: 128
image: "images/icon.png"
logo.center()
# 添加一個(gè)的狀態(tài)（原始狀態(tài)是'default'）
logo.states.add
second:
y: 200
scale: 1.5
rotation: 225
third:
y: 300
scale: 0.5
blur: 25
# 創(chuàng)建一個(gè)彈性動(dòng)畫
logo.states.animationOptions =
curve: "spring(250,25,0)"
# 當(dāng)點(diǎn)擊時(shí)播放動(dòng)畫
logo.on Events.Click, ->
logo.states.next()
做完后Ctrl+S保存文件浮毯，你會(huì)發(fā)現(xiàn)在你的項(xiàng)目文件夾下多出一個(gè)app.js文件。
8泰鸡、預(yù)覽你的原型
點(diǎn)擊側(cè)邊欄的index.html文件债蓝，接著點(diǎn)擊Packages –> Preview HTML –> Enable Preview開始預(yù)覽。
現(xiàn)在你應(yīng)該可以看見你的可交互Framer原型啦盛龄。
需要注意的是惦蚊，盡管這可以實(shí)時(shí)預(yù)覽，但更新app.coffee并不會(huì)觸發(fā)瀏覽器刷新讯嫂。所以當(dāng)你更新app.coffee并生成app.js之后蹦锋，還需要額外的一步——打開index.html代碼在最后回車或者刪除一個(gè)空白行，你的原型就會(huì)刷新同步到最新的代碼啦欧芽。
※本文系原創(chuàng)翻譯文章莉掂，轉(zhuǎn)載請(qǐng)務(wù)必注明：轉(zhuǎn)自leadream的簡書并附簡書主頁鏈接，謝謝千扔！侵權(quán)必究憎妙。※
