前言

在表達式輸入框里可以輸入數字,也可以輸入含有變量的運算公式,亦或者圖層的X坐標,Y坐標,寬度,高度等屬性函數。利用這個功能交互效果可以更豐富,制作起來也更便捷。

表達式的輸入

在計算交互具體數值時,圖層的屬性可以作為計算公式的一部分加入,從而讓計算結果根據圖層屬性值的每次變化而不同。變量也可以加入計算。在交互動作屬性欄輸入數值的時候,點擊展開按鈕就會看到輸入公式的窗口,輸入公式的時候系統會輔助你自動完成。

表達式的輸入

基礎教程

表達式

表達式的基本使用方法介紹。 在反應中插入數值時,可以直接提取圖層的屬性。和直接輸入數值不同,使用表達式時,每次交互的效果都會隨著屬性值的改變而變化。

變量

變量的基本使用方法介紹。您可以為變量指定數字,文本和顏色,并使用"賦值"更改變量的值,從而創建隨之變化的交互。

應用案例

菜單切換

反應動作的數值不僅可以輸入固定的數值,也可以輸入公式,而公式里面還可以加入其他圖層的屬性。利用這個功能,可以更輕松制作以下案例:表示選中的背景藍色圖層,根據點擊不同菜單,移動到不同菜單的X軸的位置。比如點擊Menu2,藍色圖層就移動到`Menu2`.x。 這樣不管Menu2的X坐標怎么變化,都可以保證藍色背景移動到準確位置,也省去了計算Menu2坐標的步驟。

微調器

您可以使用變量創建一個加減調節的微調器。

水波紋效果

利用預定義變量,可以識別手指點擊屏幕的位置。如果希望以手指點擊的位置為中心顯示水波紋的效果,則可以在移動反應動作的坐標值中輸入 $touchX$touchY,這樣就可以讓水波紋圖層移動到手指點擊的位置之后再發生從無到有的效果。

文本輸入

使用`layerName`.text 可以讓輸入的文本內容映射在其他文本中。也可以把`layerName`.text和其他文本內容結合起來,組成句子一起顯示。

變量

ProtoPie支持變量功能。變量值的屬性有文本、數字、顏色三種。通過使用“賦值”反應動作讓變量的值發生變化,然后再通過“偵查“觸發動作檢測到變量發生了變化,只要有變化發生就會觸發設定好的反應動作。另外,在反應動作的屬性設置里,除了直接輸入數值,還可以輸入表達式,而表達式里面可以套用變量。也就是說現在調整動作屬性變化的方式有兩種,一種是直接輸入數值,一種是通過含有變量的表達式。

適用于所有場景的變量
該變量可以在一個文件內的所用場景中使用。一般在制作跨場景的交互邏輯時使用。比如在場景1里如果“適用于所有場景”的變量發生了變化,那么可以影響場景2里面的交互也發生變化。
僅適用于當前場景的變量
該變量僅對當前場景起作用。在場景1里面制作的變量無論怎么變化都不會影響到場景B。為各場景設置獨立變量時使用。

變量種類

變量的種類有三個:文本、數字、顏色。在設定變量的時候先需要選擇一個種類,之后在用到這個變量時,系統就會按照相應的種類去處理。

文本
只可以設定文本類的值。即使輸入的是數字,系統也會把數字按照文本去處理。
數字
只可以設定數字類的值。如果輸入是文本,則會發生錯誤。
顏色
只可以設定#FFFFFF類的顏色值。如果輸入其他格式,則會發生錯誤。

顯示變量

在畫板和預覽窗可以顯示變量的當前值。這個功能可以幫助在制作過程中觀察變量是否按照預想的方式在變化。

預定義變量

預定義變量指的是ProtoPie自己為用戶已經設定好的一些變量,用戶可以直接調用。比如識別鼠標當前坐標的變量,或者識別鍵盤高度的變量等。

  • $mouseX 鼠標所在位置的X軸坐標。
  • $mouseY 鼠標所在位置的Y軸坐標。
  • $touchX 點擊屏幕時的X軸坐標。
  • $touchY 點擊屏幕時的Y軸坐標。
  • $touchVelocity 點擊后手指在屏幕上滑動的速度。
  • $touchVelocityX 點擊后手指在屏幕X軸方向上的滑動速度。
  • $touchVelocityY 點擊后手指在屏幕Y軸方向上的滑動速度。
  • $touchPointerCount 同時點擊屏幕的手指數
  • $keyboardHeight 移動端鍵盤在屏幕上的顯示高度。
  • $deviceOS 當前設備的系統。
  • $pi Pi (3.141592).
  • $time 使用該變量可以獲取 Pie文件的運行時長(秒)。 如果希望得到從某一事件發生之后的時長,應將事件發生的時間賦給變量并從$time中減去該時間值。

表達式規則

字面量

在表達式輸入窗里可以輸入圖層名稱、數字、文本等。輸入時應遵守以下規則。

圖層名稱

在圖層名稱兩側需要使用半角單引號。

圖層名稱

文本

在文本兩側需要使用半角雙引號。

文本

文本換行

換行時需使用\n

文本換行

數字

只能使用純數字格式,不可以加入其他符號。

數字

顏色

需使用#FFFFFF格式的顏色值。

顏色

變量

變量不需要加其他符號,直接輸入變量名即可。

變量

運算符號

在表達式中可以使用加號(+),減號(-),乘號(*),除號(/),余數(%)等符號做四則運算。

余數符號(%)

觸發計算時,整除部分以外余下的部分叫做“余數”。比如 5%2 表示 5除以2之后得2,余數是1,所以 5%2 = 1。

文本運算

運算符號中只有“加號”也可以被文本使用。在文本中使用加號則表示將兩個文本連接。比如 文字“1”加上文字“2”的話得到的是文本“12”.

文本 + 文本

"helloworld"

"12"

文本 + 數字

"hello1234"

圖層屬性

圖層坐標、大小等屬性值可以成為表達式的一部分。

  • `layerName`.x 圖層的X軸坐標值
  • `layerName`.y 圖層的Y軸坐標值
  • `layerName`.width 圖層的寬度值
  • `layerName`.height 圖層的高度值
  • `layerName`.scaleX 圖層寬度比例值
  • `layerName`.scaleY 圖層高度比例值
  • `layerName`.rotation 圖層旋轉角度值
  • `layerName`.rotation3d 圖層的3D旋轉值。
  • `layerName`.opacity 圖層透明度值
  • `layerName`.radius 圖層圓角值
  • `containerName`.scrollOffset 當前滾頁值
  • `layerName`.color 圖層的顏色 HEX值
  • `layerName`.fillOpacity 圖層顏色填充度的值
  • `layerName`.borderWidth 圖層邊框寬度值
  • `layerName`.borderColor 圖層邊框顏色值
  • `layerName`.borderOpacity 圖層邊框透明度
  • `layerName`.shadowOffsetX 圖層陰影X軸偏移值
  • `layerName`.shadowOffsetY 圖層陰影Y軸偏移值
  • `layerName`.shadowBlur 圖層陰影模糊度
  • `layerName`.shadowColor 圖層陰影顏色值
  • `layerName`.shadowOpacity 圖層陰影透明度
  • `layerName`.text 文本圖層的文本內容
  • `layerName`.textColor 文本圖層的文本顏色值
  • `layerName`.textOpacity 文本圖層的文本透明度
  • `layerName`.currentTime 視頻或音頻的當前播放時間。

函數

文本處理

  • length(source: TEXT)NUMBER
    • 此函數表示求文本長度
    • e.g. length("hello")5
  • left(source: TEXT, count: NUMBER)TEXT
    • 此函數表示從文本左邊開始,輸出相應數字的前幾個字符。
    • e.g. left(“hello”, 3)“hel”
  • right(source: TEXT, count: NUMBER)TEXT
    • 此函數表示從文本右邊開始,輸出相應數字的前幾個字符。
    • e.g. right(“hello”, 3)"llo”
  • concat(source1: TEXT, source2: TEXT)TEXT
    • 此函數表示將兩個文本內容合并
    • e.g. concat("hello", "world")"helloworld"
  • replace(source: TEXT,from: TEXT, to: TEXT)TEXT
    • 此函數表示將文本中指定部分替換成其他的內容。
    • e.g. replace("helloworld","world", "protopie")"helloprotopie"
  • trim(source: TEXT)TEXT
    • 此函數表示去除文本兩邊的空白。
    • e.g. trim(" helloworld ")"helloworld"
  • ltrim(source: TEXT)TEXT
    • 此函數表示去除文本左邊的空白
    • e.g. ltrim(" helloworld ")"helloworld "
  • rtrim(source: TEXT)TEXT
    • 此函數表示去除文本右邊的空白
    • e.g. rtrim(" helloworld ")" helloworld"
  • indexOf(source: TEXT, searchValue: TEXT)NUMBER
    • 在文本中找到searchValue后面指定的內容,計算該內容的位置值。位置值從0開始,如果沒有找到指定內容則輸入值為-1。
    • e.g. indexOf("hello world", "world")6
  • lowerCase(source: TEXT)TEXT
    • 此函數表示將大寫字母的文本轉換成小寫的文本。
    • e.g. lowerCase("Hello")"hello"
  • upperCase(source: TEXT)TEXT
    • 此函數表示將小寫字母的文本轉換成大寫的文本。
    • e.g. upperCase("Hello")"HELLO"
  • lpad(source: TEXT, length: NUMBER, padString: TEXT)TEXT
    • 在輸入的文本左側進行填充以達到期望的長度
    • e.g. lpad(5, 2, "0")"05"
  • rpad(source: TEXT, length: NUMBER, padString: TEXT)TEXT
    • 在輸入的文本右側進行填充以達到期望的長度 length.
    • e.g. rpad(5, 2, "0")"50"
  • repeat(source: TEXT, count: NUMBER)TEXT
    • 對指定文本以指定次數進行重復輸入操作
    • e.g. repeat("hello", 3)"hellohellohello"

數學計算

  • min(source1: NUMBER, source2: NUMBER)NUMBER
    • 此函數表示取兩個數字中的最小值。
    • e.g. min(0, 1)0
  • max(source1: NUMBER, source2: NUMBER)NUMBER
    • 此函數表示取兩個數字中的最大值。
    • e.g. max(0, 1)1
  • abs(source: NUMBER)NUMBER
    • 此函數表示取數字的絕對值。
    • e.g. abs(-1)1
  • round(source: NUMBER)NUMBER
    • 此函數表示小數點進一位后的整數
    • e.g. round(1.5)2
  • floor(source: NUMBER)NUMBER
    • 此函數表示去掉小數點后的整數
    • e.g. floor(1.5)1
  • ceil(source: NUMBER)NUMBER
    • 此函數表示去掉小數點后,整數進1。
    • e.g. ceil(1.5)2
  • sqrt(source: NUMBER)NUMBER
    • 此函數表示取平方根,如果數字是負數則顯示錯誤。
    • e.g. sqrt(9)3
  • pow(source1: NUMBER, source2: NUMBER)NUMBER
    • 此函數表示取number1的number2 階乘值.
    • e.g. pow(2, 3)8
  • sin(radian: NUMBER)NUMBER
    • 此函數表示取數字的sin值
    • e.g. sin(90)-0.89
  • cos(radian: NUMBER)NUMBER
    • 此函數表示取數字的cos值
    • e.g. cos(90)-0.45
  • tan(radian: NUMBER)NUMBER
    • 此函數表示取數字的tan值//輸入90度等無限計算的情況則無法計算
    • e.g. tan(45)1.62
  • asin(value: NUMBER)NUMBER
    • 此函數表示取反正弦值的弧度。
    • e.g. asin(0)0
    • e.g. asin(1)1.5707963267948966(PI / 2, 90°)
  • acos(value: NUMBER)NUMBER
    • 此函數表示取反余弦值的弧度。
    • e.g. acos(0)1.5707963267948966(PI / 2, 90°)
    • e.g. acos(1)0
  • atan(value: NUMBER)NUMBER
    • 此函數表示取反正切值的弧度。
    • e.g. atan(0)0
    • e.g. atan(1)0.7853981633974483(PI / 4, 45°)
  • random()NUMBER
    • 此函數表示在0和1中隨機取得一個數字。
    • e.g. random() ➔ 此函數表示在0和1中隨機取得一個數字。
  • random(min: NUMBER, max: NUMBER)NUMBER
    • 此函數表示在指定區間內隨機取得一個數字。
    • e.g. random(1, 5) ➔ 在1-5 之間隨機取得一個數字。
  • randomInt(min: NUMBER, max: NUMBER)NUMBER
    • 此函數表示在指定區間內隨機取得一個整數。
    • e.g. randomInt(1, 5) ➔ 在1-5 之間隨機取得一個整數
  • sign(value: NUMBER)NUMBER
    • 正數返回1
      負數返回-1
      值為0時返回0
  • atan2(x: NUMBER, y: NUMBER)NUMBER
    • 返回以弧度表示的從點(0,0)到點(x,y)的射線與x軸正半軸之間的夾角大小
  • degrees(radians: NUMBER)NUMBER
    • 將弧度值轉換為角度值
  • radians(degree: NUMBER)NUMBER
    • 將角度值轉換為弧度值

顏色

  • color(red: NUMBER, green: NUMBER, blue: NUMBER)COLOR
    • 此函數表示將RGB的色值轉化為#FFFFFF
    • e.g. color(255, 255, 255)#FFFFFF
  • red(source: COLOR)NUMBER
    • 此函數表示將十六進制的色值轉化為RGB后提取其中的紅色值
    • e.g. red(#FF0000)255
  • green(source: COLOR)NUMBER
    • 此函數表示將十六進制的色值轉化為RGB后提取其中的綠色值
    • e.g. green(#FF0000)0
  • blue(source: COLOR)NUMBER
    • 此函數表示將十六進制的色值轉化為RGB后提取其中的藍色值
    • e.g. blue(#FF0000)0

類型轉換

  • text(source: NUMBER)TEXT
    • 此函數表示將數字格式轉換為文本格式
    • e.g. text(1234)"1234"
  • number(source: TEXT)NUMBER
    • 此函數表示將文本格式里的數字轉換為數字格式
    • e.g. number("1234")1234
  • color(source: TEXT)COLOR
    • 此函數表示將文本格式里的數字轉換為十六進制的色值。但如果輸入的文本不符合十六進制的色值表達方式,則將出現錯誤。
    • e.g. color("#FFFFFF")#FFFFFF
  • format(value: NUMBER, format: TEXT)TEXT
    • 將數字轉換為文本格式時,可以指定數字標記方法。 比如指定數字分隔小數點的位置,以及小數點的標記方法等等。
      number:要轉換為文本的數字
      formatText:要轉化的文本格式。 整數部分用#表示,小數部分用0表示,可以在中間添加分隔符的字符。
    • e.g. format(1234.567, "#,###.00")1,234.58
    • e.g. format(1234567, "#,###.00")1,234,567
    • e.g. format(1234.567, "#.###,00")1.234,57
    • e.g. format(1234.567, "#,##.00")12,34.57
    • e.g. format(1234.567, "#,###")1,235
    • e.g. format(1234.567, "#")1235
  • layer(source: TEXT).layerPropertyNUMBER或TEXT
    • 對圖層實施參照引用
    • e.g. layer("Rectangle 1").x ➔ 取得名叫Rectangle 1的圖層的x值
TOP
哪个软件上能炒白银