Java SE Development Kit 8 mac8u181 官方最中文 / 242.3M
Adobe Dreamweaver cs6 for mac官方簡(jiǎn)體中文中文 / 405.3M
SVN管理工具(Cornerstone Mac版)v4.0 官方最英文 / 16.5M
mac PHP集成開(kāi)發(fā)工具(PhpStorm)V8.0.3官方最英文 / 124.4M
蘋(píng)果SQLite數(shù)據(jù)庫(kù)管理工具(SQLiteManager f中文 / 7.9M
Mac十六進(jìn)制文本編輯器(UltraEdit)18.00.0.中文 / 56.0M
Navicat Premium for macv11.1.11 官方最新中文 / 144.7M
Editplus for macV3.80 官方最新版中文 / 12M
Framer Studio是一款非常適合設(shè)計(jì)師們學(xué)習(xí)代碼的原型設(shè)計(jì)工具，國(guó)內(nèi)很多設(shè)計(jì)師們都沒(méi)有Coding 基礎(chǔ)，原先想要使用這款純代碼構(gòu)建界面的framer真的比較不現(xiàn)實(shí)，現(xiàn)在這款Framer Studio在經(jīng)過(guò)一百多次版本更新后，它變得更像 Sketch ，你能直接在里面用鼠標(biāo)來(lái)構(gòu)建你的原型，而且還有了更接近于 Sketch 的那種 artboards 的概念。
Framer和Sketch一樣，都是以圖層的形式來(lái)展現(xiàn)設(shè)計(jì)。與Sketch不同的是，每個(gè)圖層除了擁有尺寸、位置、背景色等樣式屬性以外，還有狀態(tài)等屬性。每個(gè)圖層可以是其他圖層的父圖層，也可以是其他圖層的子圖層，可以看成Sketch的分組。而動(dòng)效的表現(xiàn)，則是通過(guò)不同狀態(tài)之間的過(guò)渡來(lái)實(shí)現(xiàn)，不同狀態(tài)間發(fā)生變化的屬性就會(huì)形成一個(gè)補(bǔ)間動(dòng)畫(huà)。
在Framer的代碼里面，有這么一些特殊的符號(hào)或詞語(yǔ)需要注意，我們拿下面這段代碼來(lái)舉例：
# Set background colorScreen.backgroundColor ="#333"layerA.onClick(event, layer)->
layerA.states.switch("stateB")1、圓點(diǎn)：
代表所屬，可以翻譯成“的”。
上述代碼中Screen.backgroundColor翻譯過(guò)來(lái)就是screen（屏幕）的背景色。需要注意的是，原點(diǎn)后面不僅可以跟屬性值，還可以跟一個(gè)操作，上述代碼中的layerA.onClick翻譯過(guò)來(lái)就是“點(diǎn)擊圖層A時(shí)”。
2、等號(hào)：
等號(hào)在這里表示賦值，就像數(shù)學(xué)里面的x=1表示把1賦給了x。上述代碼中Screen.backgroundColor=”#333”就把#333這個(gè)顏色給了屏幕背景色，即把屏幕背景色設(shè)為#333。
3、井號(hào)：
井號(hào)表示注釋，就是給代碼做備忘。即使過(guò)了很長(zhǎng)時(shí)間，再通過(guò)看注釋也能知道這里的代碼干了什么。而系統(tǒng)是不會(huì)處理注釋的，注釋只是給人看的。
4、關(guān)鍵詞：
所謂關(guān)鍵詞，就是Framer中既定的一些關(guān)鍵作用的詞，你在命名時(shí)不能使用。上述代碼中，backgroundColor、onClick、states都是關(guān)鍵詞，在Framer編輯器中他們一般是藍(lán)色的。隨著學(xué)習(xí)深入，我們還會(huì)接觸很多關(guān)鍵詞。
關(guān)鍵詞
5、函數(shù)：
回想一下數(shù)學(xué)中的函數(shù)：f(x,y)=x+y，f(x,y)接收參數(shù)x和y，計(jì)算x+y后返回結(jié)果給f(x,y)。在Framer中函數(shù)的概念類似，接受一個(gè)或多個(gè)參數(shù)做處理后返回或者不返回。
一般要先定義函數(shù)，就可以到各個(gè)地方引用函數(shù)了，引用時(shí)可以傳入不同的參數(shù)。
Framer的函數(shù)表達(dá)式一般這么定義：
sum=( a , b )-> a + b
它就表示函數(shù)sum接收兩個(gè)參數(shù)a和b，計(jì)算a+b后返回結(jié)果。在引用函數(shù)時(shí)我們直接寫(xiě)sum(2,3)，那么sum(2,3)的值就是5。
6、對(duì)象：
終于說(shuō)到程序員面對(duì)的終極問(wèn)題——對(duì)象，在代碼里對(duì)象是一個(gè)集合體，它可以包含一些屬性和操作。在創(chuàng)建對(duì)象時(shí)，使用new關(guān)鍵詞，比如創(chuàng)建一個(gè)女朋友圖層對(duì)象：
# Create my girlfriendgirlfriend =new Layer name:"beauty" width:60 height:170
她包含了一些屬性：名字叫beauty，寬度是60，高度是170，當(dāng)我們使用她的某一個(gè)屬性時(shí)，只需要用小圓點(diǎn)就可以啦，比如她的身高就是girlfriend.height。
同時(shí)，她還包含一些操作，比如girlfriend.centerX(12)表示讓她站在屏幕中央往右偏移12的位置（centerX( )是Framer中定義好的操作，圖層對(duì)象都有，具體可以查閱文檔）。
現(xiàn)在回來(lái)看我們的任務(wù)：在屏幕上畫(huà)一個(gè)藍(lán)色的圓形，當(dāng)點(diǎn)擊它時(shí)，它會(huì)逐漸變成綠色，同時(shí)會(huì)變成一個(gè)正方形。
假設(shè)這個(gè)圓形的半徑是80，藍(lán)色為”#14C4FF”，綠色為”#36E43C”，那我們先畫(huà)一個(gè)藍(lán)色的圓形。
在Framer中圖層默認(rèn)是矩形，所以我們可以先畫(huà)一個(gè)正方形，把它的圓角半徑設(shè)為寬度的一半就變成圓形了。用代碼表示就是：
# Create layerlayerA =new Layer width:160 height:160 x:240 y:300 backgroundColor:"#14C4FF" borderRadius:80
我們給它取名layerA，new Layer就是新建一個(gè)圖層，連起來(lái)就是新建一個(gè)圖層并把它賦給layerA。下面的代碼都往后縮進(jìn)（按tab鍵縮進(jìn)）了，它們表示layerA的屬性。我們?cè)O(shè)置寬高為160，x、y是位置，我隨便設(shè)的，為了把它定在屏幕中央。背景色設(shè)為藍(lán)色，圓角半徑設(shè)為80，在右側(cè)就出現(xiàn)了一個(gè)圓：
初始狀態(tài)：圓形
接下來(lái)，我們給它添加一個(gè)新的狀態(tài)。
# Add stateslayerA.states.add stateB: borderRadius:0 backgroundColor:"#36E43C"
layerA.states.add表示給layerA的狀態(tài)添加一個(gè)，取名為stateB，在該狀態(tài)下，圓角半徑是0，顏色是綠色，就像這樣：
狀態(tài)B：矩形
不過(guò)你看不到它變成正方形，因?yàn)槟J(rèn)的狀態(tài)就是開(kāi)始創(chuàng)建時(shí)設(shè)置的圓形那個(gè)狀態(tài)。
接下來(lái)，我們就要給layerA添加一個(gè)點(diǎn)擊事件，使它在被點(diǎn)擊時(shí)從初始狀態(tài)變換到stateB。代碼是這樣的：
layerA.onClick(event, layer)->
layerA.states.switch("stateB")layerA所包含的操作onClick(event,layer)，一直監(jiān)聽(tīng)layerA是否被點(diǎn)擊，當(dāng)它被點(diǎn)擊時(shí)就執(zhí)行l(wèi)ayerA.stas.switch(“stateB”)的操作，即layerA的狀態(tài)轉(zhuǎn)換到stateB。
至此，我們就完整的將這句話翻譯成Framer能夠聽(tīng)懂的語(yǔ)言。你可以自己試一試，寫(xiě)你的第一段代碼。
功能特色：
1. 用Framer設(shè)計(jì)一切
您需要有潛力設(shè)計(jì)全新的東西。 Framer是一個(gè)使用代碼做任何事情的設(shè)計(jì)工具。先鋒新模式和突破性設(shè)計(jì)。找到最好的解決方案，而不只是預(yù)期的解決方案。
2. 為什么要寫(xiě)代碼？
學(xué)習(xí)代碼可以讓您探索每一個(gè)創(chuàng)意概念，而不僅僅是復(fù)制模式。代碼不僅適用于工程師。如果你試試，我們認(rèn)為你會(huì)同意代碼是設(shè)計(jì)師可以擁有的最強(qiáng)大的工具之一。
3. 為任何設(shè)備設(shè)計(jì)
適用于iOS，Android，Mac OS，Windows和Web。您所需的任何平臺(tái)都涵蓋了Framer。從蘋(píng)果，谷歌和HTC，微軟和三星的大量顏色中選出超過(guò)18種設(shè)備。
4. 設(shè)定你的創(chuàng)造力
成幀器比轉(zhuǎn)換或快速動(dòng)畫(huà)做得更多。使用實(shí)際數(shù)據(jù)設(shè)計(jì)。構(gòu)建與可定制組件的實(shí)際接口。測(cè)試并驗(yàn)證所有創(chuàng)意概念！
Framer Studio for Mac 蘋(píng)果移動(dòng)交互原型設(shè)計(jì)工具
5. 成幀器適合您的設(shè)計(jì)過(guò)程
•直接從Sketch或Photoshop導(dǎo)入圖形。只需重新導(dǎo)入。完成后，通過(guò)在移動(dòng)設(shè)備上分享您的工作來(lái)收集反饋。
•動(dòng)作微調(diào)每個(gè)動(dòng)畫(huà)，直到你的圖層和諧地移動(dòng)。
•觸摸設(shè)置使用組件拖動(dòng)，滾動(dòng)或頁(yè)面手勢(shì)。
•深度響應(yīng)3D空間中的方向更改和傾斜圖層。
•輸入捕捉鍵盤(pán)輸入以測(cè)試和處理實(shí)際的用戶數(shù)據(jù)。
•數(shù)據(jù)拉入配置文件照片或用戶名 - 任何與API。
•自適應(yīng)使響應(yīng)原型適應(yīng)用戶交互。
•導(dǎo)入將您的靜態(tài)設(shè)計(jì)變成工作原型。
•使用瀏覽器在任何設(shè)備上預(yù)覽預(yù)覽，使用鏡像
•目前在全屏幕上，為重點(diǎn)的經(jīng)驗(yàn)。
•分享快速分享一個(gè)無(wú)障礙用戶測(cè)試的URL。
特別說(shuō)明
聲明：西西軟件園為非贏利性網(wǎng)站 不接受任何贊助和廣告