PaintCode 用戶(hù)操作指南(變量篇)
使用變量(Using Variables)
和顏色和漸變一樣,變量也是設(shè)計(jì)師能夠在 PaintCode 文檔中使用的一種庫(kù)項(xiàng)目。
變量可以使數(shù)字、文本、布爾值(邏輯數(shù)值)、點(diǎn)、矩形、大小,甚至是顏色、陰影和漸變。設(shè)計(jì)師能夠?qū)⒆兞颗c畫(huà)布中的圖形屬性相連。
例如,設(shè)計(jì)師可以創(chuàng)建一個(gè)樹(shù)枝變量為半徑,并且它連接到幾個(gè)圓角矩形的半角半徑屬性。當(dāng)設(shè)計(jì)師改變半徑變量,所有被連接圖形的角半徑都將同步更新。
通過(guò)在畫(huà)布上生成繪制方法,變量會(huì)轉(zhuǎn)化為方法參數(shù)。
創(chuàng)建變量(Creating variables)
在庫(kù)中變量頭部左邊的位置,單擊 + 按鈕,來(lái)創(chuàng)建一個(gè)新的變量。然后,選擇設(shè)計(jì)師想創(chuàng)建的變量類(lèi)型。
編輯變量(Editing variables)
當(dāng)設(shè)計(jì)師創(chuàng)建一個(gè)新的變量的同時(shí),一個(gè)編輯區(qū)域也會(huì)出現(xiàn)。設(shè)計(jì)師在庫(kù)中雙擊變量,能夠隨時(shí)進(jìn)入編輯區(qū)域。
編輯區(qū)域允許設(shè)計(jì)師調(diào)整變量的屬性,也許最重要的是它的值和名字。
不同的變量有不同的編輯區(qū)域。以下是矩形變量編輯區(qū)域的樣子:
慣用屬性影響著生成的代碼,一會(huì)回來(lái)。
小竅門(mén):設(shè)計(jì)師在沒(méi)有打開(kāi)變量編輯區(qū)域的時(shí)候,就能夠調(diào)整大所屬變量的值。只要單擊并上下拖動(dòng)變量的值域編輯區(qū)域就可以了。
連接變量和圖形(Connecting variable to shapes)
有幾種方法能夠?qū)⒆兞颗c一些圖形的屬性連接。第一種,在畫(huà)布中選擇圖形(或者幾個(gè)圖形),然后點(diǎn)擊并拖動(dòng)變量連接點(diǎn)到檢查器中圖形的屬性上。
或者,設(shè)計(jì)師能夠點(diǎn)擊并拖動(dòng)連接點(diǎn)直接連接到畫(huà)布中的圖形,然后從彈出的上下文菜單中選擇想要的屬性。這比第一中方法方便。但是,設(shè)計(jì)師只能用它來(lái)操作一次,用來(lái)連接一個(gè)圖形的變量(相比之下,當(dāng)設(shè)計(jì)師通過(guò)檢查器創(chuàng)建連接的時(shí)候,這樣能夠用來(lái)連接一個(gè)變量到多個(gè)圖形。)
也要注意一些屬性,像貝塞爾曲線點(diǎn)的位置以及一些能夠通過(guò)檢查器鏈接的組屬性。
連接指示按鈕(Connection indicator button)
當(dāng)設(shè)計(jì)師連接變量到一些屬性后,在檢查器中就會(huì)出現(xiàn)一個(gè)連接指示按鈕(這個(gè)按鈕替代原來(lái)屬性中的文本字段)。在下面的例子中,已經(jīng)鏈接一個(gè)變量到一個(gè)圓角矩形的角半徑屬性。
點(diǎn)擊連接指示按鈕,就會(huì)出現(xiàn)連接指示按鈕編輯區(qū)域。
編輯區(qū)域允許設(shè)計(jì)師制定一個(gè)偏移值,當(dāng)通過(guò)屬性被使用的時(shí)候,一個(gè)值應(yīng)該被加到變量的值上面。這些自定義比納涼的偏移值可以大大減少設(shè)計(jì)師文檔中創(chuàng)建變量的數(shù)量。此外,這個(gè)連接指示按鈕也可以切換屬性來(lái)使用不同的變量,如果可以的話。
斷開(kāi)屬性的變量鏈接(Disconnecting a variable from an attribute)
點(diǎn)擊小紫色圓形中的白色叉,就能夠斷開(kāi)屬性的變量鏈接(這個(gè)圓形在連接指示按鈕中)。
當(dāng)斷開(kāi)變量鏈接,這個(gè)連接指示按鈕就會(huì)消失了,并且返回原有的文字域:
使用變量控制可見(jiàn)性(Controlling the visibility of shapes using variables)
設(shè)計(jì)師能夠使用布爾變量來(lái)控制任意圖形的可見(jiàn)度。在圖形檢查器中,在名字文本域下方的一個(gè)彈出按鈕中。
默認(rèn)情況下,全部可見(jiàn)(Visible on all displays)是被勾選的。只在 Retina 屏幕下可見(jiàn)(Visible only on Retina displays)以及在非 Retina 屏幕下可見(jiàn)(Visibile only on non-Retina displays)設(shè)置也是可見(jiàn)的。
另外,這個(gè)彈出按鈕包含了 PaintCode 所有的布爾變量。
在上面的例子中,PaintCode 文件包含一個(gè)叫做 isPressed 的布爾變量。通過(guò)選擇 按下可見(jiàn)(Visible if isPressed)選項(xiàng),當(dāng)按下變量是真時(shí),PaintCode 會(huì)確保圖形唯一可見(jiàn)。
在畫(huà)布上顯示變量(Variables displayed in canvas)
當(dāng)設(shè)計(jì)師創(chuàng)建點(diǎn)或者矩形變量,并且在畫(huà)布中將其與一些圖形鏈接,變量本身也會(huì)在畫(huà)布中顯示,顯示為紫色。
在點(diǎn)的情況下,它顯示為能被拖動(dòng)的小目標(biāo)符號(hào)。點(diǎn)變量的值也會(huì)發(fā)生相應(yīng)的變化。矩形變量也有類(lèi)似的設(shè)置。
這個(gè)功能非常的有用,例如,當(dāng)設(shè)計(jì)師創(chuàng)建一個(gè)點(diǎn)變量代表一個(gè)鼠標(biāo)光標(biāo)的時(shí)候。設(shè)計(jì)師能夠基于這個(gè)變量(使用表達(dá)式),創(chuàng)建許多變量。,并通過(guò)移動(dòng)指針變量,設(shè)計(jì)師能夠輕松的測(cè)試產(chǎn)生的行為。
使用 畫(huà)布 ? 顯示變量菜單(Canvas ? Show Variables menu),可將這個(gè)功能開(kāi)啟或者關(guān)閉。
變量和代碼生成(Variables and code generation)
通過(guò)在畫(huà)布上繪制方法,變量會(huì)轉(zhuǎn)化為參數(shù):
–?(void)drawRateButtonWithRadius:?(CGFloat)radius?title:?(NSString*)title?pressed:?(BOOL)pressed;
除非,當(dāng)然,設(shè)計(jì)師選擇的變量在它的編輯區(qū)域中表現(xiàn)為一個(gè)局部變量。注意,表達(dá)式變量總是局部變量。
表達(dá)式(Expressions)
PaintCode 允許設(shè)計(jì)師創(chuàng)造另一種特殊變量——表達(dá)式。這些變量能夠使用數(shù)學(xué)和編程表達(dá)式來(lái)定義值。它們依賴(lài)其他變量,甚至是其他庫(kù)項(xiàng)目,比如顏色。
PaintCode 中有一些基本的簡(jiǎn)短的編程語(yǔ)言。這些具有 C 以及 JavaScript 的子集,并且方便使用。使用表達(dá)式變量,設(shè)計(jì)師能夠創(chuàng)建復(fù)雜的、動(dòng)態(tài)的設(shè)計(jì),甚至是游戲動(dòng)畫(huà)角色。
當(dāng)在表達(dá)式的部分中顯示橙色背景,這意味著這里有一些錯(cuò)誤。點(diǎn)擊表達(dá)式部分的橙色,或者在編輯區(qū)域的左下角點(diǎn)擊警告三角形來(lái)顯示錯(cuò)誤信息。
表達(dá)式不僅限于數(shù)字,還能夠運(yùn)用邏輯運(yùn)算,比如:?。C 語(yǔ)言的三元算子,甚至是創(chuàng)建一個(gè)庫(kù)中的參考顏色。
重點(diǎn):對(duì)庫(kù)項(xiàng)目來(lái)說(shuō)這是合法的,就像顏色在其名字中有空白一樣。然而,當(dāng)設(shè)計(jì)師想再表達(dá)式中通過(guò)名字指向庫(kù)項(xiàng)目的時(shí)候,設(shè)計(jì)師必須刪除這些空白,大寫(xiě)每個(gè)單詞首字母,但要小寫(xiě)第一個(gè)字母。例如,如果在庫(kù)中有一個(gè)名為 My Red Color 的項(xiàng)目,在表達(dá)式中,設(shè)計(jì)師能夠這樣使用:myRedColor。
想學(xué)習(xí) PaintCode 的表達(dá)式,請(qǐng)閱讀下一章節(jié)。
表達(dá)式(Expression Language)
在 PaintCode 中,設(shè)計(jì)師能夠通過(guò)使用簡(jiǎn)單語(yǔ)法來(lái)定義基于其他變量的變量。這支持很多數(shù)學(xué)的、邏輯函數(shù)和控制符,這是大多數(shù)開(kāi)發(fā)人員希望的。語(yǔ)法簡(jiǎn)單,均為 C 和 JavaScript 的子集。
剛創(chuàng)建了一個(gè)語(yǔ)法的新變量,并且在一個(gè)語(yǔ)法中使用了文本視圖。新變量的值將被計(jì)算和自動(dòng)更新。
當(dāng)設(shè)計(jì)師導(dǎo)出 PaintCode 文檔后,這些變量語(yǔ)法將轉(zhuǎn)化為設(shè)計(jì)師所選擇的編程語(yǔ)言(Objective-C, Swift 或 C#)。計(jì)算變量、動(dòng)態(tài)關(guān)系與定義的變量之間,在導(dǎo)出代碼中持續(xù)的工作。
變量類(lèi)型(Types of variables)
數(shù)字(Numbers)
在 PaintCode 中所有的數(shù)字都是浮點(diǎn)。這種表達(dá)式返回?cái)?shù)字:
5
5?* 4?+ 3?* 2
在表達(dá)式中,設(shè)計(jì)師能夠方便地參考其他變量。語(yǔ)法中也包含一些設(shè)計(jì)師能夠調(diào)用的在建函數(shù):
width?* (4?– offset)
sin(2.7?/ PI?* 180)
sqrt(width?* width?+ heigt?* height)
文本(Texts)
文本變量是沒(méi)有長(zhǎng)度限制的字符串。設(shè)計(jì)師能夠使用雙精度或者單精度字符串:
“This?is text!”
‘This?is also text, now using single quotes.’
可以使用 + 運(yùn)算符鏈接文本。使用 stringFromNumber(x) 方法,能夠?qū)?shù)字轉(zhuǎn)換為文本。
“angle:?”?+ stringFromNumber(180)
設(shè)計(jì)師可以使用點(diǎn)記法,得到文本的長(zhǎng)度(字母的數(shù)量)。這會(huì)返回?cái)?shù)字。
“Hello”.length
布爾值(Booleans)
布爾變量表示邏輯值的真/假。也可以用來(lái)代表 YES, yes, NO, no。
比較的結(jié)果總是返回布爾值。舉例:
true
3?> 2
“hello”?!= “world”
mousePosition.x?>= activeRect.x?&&
mousePosition.y?>= activeRect.y?&&
mousePosition.x?<= activeRect.x?+ activeRect.width?&&
mousePosition.y?<= activeRect.y?+ activeRect.height
設(shè)計(jì)師可以使用三元算子:?運(yùn)算,返回兩個(gè)值當(dāng)中的一個(gè),這取決于第一個(gè)參數(shù)的值。第二個(gè)喝第三個(gè)參數(shù)必須保持享用的類(lèi)型(在這種情況下,文本):
isValid?? “Valid”?: “Invalid”
點(diǎn)(Point)
使用 makePoint(x, y)函數(shù)創(chuàng)建新的點(diǎn):
makePoint(10,?20)
假設(shè)設(shè)計(jì)師有一個(gè)點(diǎn)變量(稱(chēng)為 myPosition),想使用表達(dá)式中點(diǎn)的 x 坐標(biāo)。像這樣:
myPosition.x?+ 100
如何計(jì)算在 A 與 B 兩點(diǎn)中間的點(diǎn):
makePoint((positionA.x?+ positionB.x)?/ 2,
(positionA.y?+ positionB.y)?/ 2)
大?。⊿ize)
與點(diǎn)類(lèi)似,也包含兩個(gè)數(shù)字,但是代表的是寬和高,主要的目的是表示矩形大小。
makeSize(10,?20)
假設(shè)設(shè)計(jì)師已經(jīng)定義了一個(gè)變量為 defaultSize 的大小變量以及數(shù)字區(qū)域,現(xiàn)在要通過(guò)因子區(qū)域擴(kuò)大寬度:
makeSize(zoom?* defaultSize.width,?defaultSize.height)
矩形(Rectangle)
矩形變量包含四個(gè)數(shù)字:x軸,y軸,寬,高。有一個(gè)叫 makeRect(x, y, width, height)的函數(shù)來(lái)創(chuàng)建一個(gè)矩形的值。寬度和高度表示矩形的大小,(x, y)表示矩形的起點(diǎn)坐標(biāo)。
makeRect(0,?0,?640,?1136)
假設(shè)設(shè)計(jì)師已經(jīng)創(chuàng)建了一個(gè)叫 iPhoneBounds 的矩形。設(shè)計(jì)師不僅可以輕松訪問(wèn)每個(gè)單獨(dú)的值,還能夠得到矩形的大小以及起點(diǎn)坐標(biāo):
iphoneBounds.size
下面兩個(gè)表達(dá)式是等價(jià)的:
iphoneBounds.origin.x?+ iphoneBounds.size.width
iphoneBounds.x?+ iphoneBounds.width
顏色(Color)
顏色由四位數(shù)字表示:紅色,綠色,藍(lán)色和 alpha 通道。每個(gè)數(shù)字間隔為 1.使用 makeColor 函數(shù)創(chuàng)建顏色。下表的表達(dá)式將得到一個(gè)純黃色:
makeColor(1,?1,?0,?1)
顏色在庫(kù)中定義,并且能夠在表達(dá)式中使用(例如,基于是否按下按鈕得到兩紅顏色)。然而,當(dāng)在表達(dá)式中參考顏色(像其他庫(kù)項(xiàng)目中的漸變和陰影)的時(shí)候要注意,它們可以有任意的名稱(chēng),但是名稱(chēng)的變量是有限制的:
- 只允許使用英文字符,數(shù)字以及下劃線
- 只能以消協(xié)字母作為變量的開(kāi)始
顏色名稱(chēng)可以包含空格,口音以及符號(hào)(例如,對(duì)話框的背景顏色),但是當(dāng)在腳本中使用的時(shí)候,需要將它們 刪除(snanitized),例如:
原有以及刪除后的庫(kù)項(xiàng)目標(biāo)識(shí)符實(shí)例:
漸變(Gradient)
使用 makeGradient(color1, color2)函數(shù)創(chuàng)建漸變。由紅色到透明的漸變能夠這樣定義:
makeGradient(makeColor(1,?0,?0,?1),
makeColor(1,?0,?0,?0))
或者,如果設(shè)計(jì)師已經(jīng)有了兩個(gè)顏色,可以這么做:
makeGradient(solidRedColor,?transparentRedColor)
陰影(Shdow)
使用 makeShadow(color, offsetX, offsetY, blur) 函數(shù)創(chuàng)建陰影。
makeShadow(solidRedColor,?5,?5,?3)
運(yùn)算符(Operators)
運(yùn)算符的優(yōu)先級(jí):
常數(shù)(Constants)
- 布爾常量(Boolean constants):yes, no, true, false, YES, NO
- 數(shù)字常量(numeric constant):PI
- 顏色常量(color constant):MISSING_COLOR
- 漸變常量(gradient constant):MISSING_GRADIENT
- 陰影常量(shadow constant):MISSING_SHADOW
- 圖片常量(image constant):MISSING_IMAGE
基本數(shù)學(xué)函數(shù)(Basic Math Functions)
floor(x)
返回 x 的下方
ceil(x)
返回 x 的上方
round(x)
得到 x 最接近的整數(shù)
frac(x)
得到 x 的小數(shù)部分
sqrt(x)
得到 x 的平方根
abs(x)
得到 x 的絕對(duì)值
min(x, y)
得到較小的兩個(gè)參數(shù)
max(x, y)
得到較大的兩個(gè)參數(shù)
側(cè)角函數(shù)(Goniometric Functions)
sin(a), cos(a), tan(a)
goniometric functions.
注:參數(shù)標(biāo)有刻度
atan2(y, x)
基于這兩個(gè)值來(lái)確定正確的 Y/X 象限圓弧切線
顏色,漸變和陰影(Colors, gradients and shadows)
makeColor(r, g, b, a)
得到顏色坐標(biāo)以及 alpha值。所有參數(shù)從 0 或 1 開(kāi)始
makeGradient(c1, c2)
得到漸變
makeShadow(color, xOffset, yOffset, blurRadius)
得到陰影
其他函數(shù)(Other Functions)
makePoint(x, y)
得到點(diǎn)
makeSize(width, height)
得到大小
makeRect(x, y, width, height)
得到舉行起點(diǎn)坐標(biāo)以及大?。▽挕⒏撸?/p>
stringFromNumber(x)
把數(shù)字 x 轉(zhuǎn)化為文本
PaintCode 用戶(hù)操作指南系列文章
PaintCode 用戶(hù)操作指南(畫(huà)布和選項(xiàng)卡)
PaintCode 用戶(hù)操作指南(樣式表和代碼生成)
PaintCode 用戶(hù)操作指南(動(dòng)態(tài)圖形篇)
PaintCode 用戶(hù)操作指南(符號(hào)篇)
文章已經(jīng)完結(jié),敬請(qǐng)期待下一部《Sketch 3用戶(hù)操作指南及實(shí)戰(zhàn)案例全解》
本作品由人人都是產(chǎn)品經(jīng)理特邀專(zhuān)欄作家@鄭幾塊 翻譯并獨(dú)家授權(quán)發(fā)布,未經(jīng)許可禁止轉(zhuǎn)載
- 目前還沒(méi)評(píng)論,等你發(fā)揮!