這是一篇關于Axure字符串函數的應用案例分享，enjoy~

最近在計劃連載一下關于Axure的一些教程，Axure主要四個核心要素（難點）：動态面闆、事件、函數、中繼器。我個人的觀點是動态面闆和事件對應産品的交互設計、産品架構；函數對應産品的業務邏輯，判定等；中繼器對應數據結構，數據類型等；其中掌握函數的應用便能夠表達出産品中的複雜邏輯，今天給大家講解字符串函數的應用，下面看一組案例。

案例效果

見下圖：

描述：當單擊播放按鈕是，進度條顯示已播放時間，同時圓形滑塊向右移動

元件準備

動态面闆（用于循環動作效果）：LoopPanel

矩形（用于滑塊）：Slider

矩形（用于進度條）：ProgressBar

矩形（用于進度條灰色背景）：BackgroundShape

文本标簽（用于顯示播放時間）：PlayTime

圖片（用于播放按鈕）：PlayButton

思路分析

① 播放時間每秒鐘自增1秒，需要通過循環實現；那麼，點擊播放按鈕開始播放是就需要開啟循環；

② 播放狀态時，需要記錄已播放時長；在每一次循環過程中，如果播放狀态為開啟，并且播放時長未達到總時長時，我們都需要讓已播放時長自增1秒鐘；

③ 播放狀态時，吧播放時長顯示在界面上；

④ 播放狀态時，進度滑塊需要向右相應的移動；

⑤ 播放狀态時，播放進度條也相應變長；

⑥ 循環過程中，如果發現播放狀态為關閉或播放結束，我們都需要停止循環；

⑦ 播放結束時，要讓播放按鈕變為關閉狀态；

⑧ 播放結束時，進度條保持在當前位置；

⑨ 播放結束時，播放時長的記錄保持為當前時間；

操作步驟

1. 在播放按鈕【選中時】事件的“case1”中，添加新的動作【設置面闆狀态】于動态面闆“LoopPanel”，{選擇狀态}為【Next】，勾選【向後循環】的選項，勾選并設置【循環間隔】“1000”毫秒，勾選【首個狀态演示1000毫秒後切換】。

事件交互設置見下圖：

case動作設置見下圖

2. 創建全局變量“PlayTime”，設置默認值為“0”；然後為動态面闆“LoopPanel”的【狀态改變時】事件添加“case1”，添加條件判斷【變量值】“PlayState”【==】“on”，并且【變量值】“PlayTime”【<】【值】“204”，設置滿足條件的動作為【設置變量值】“PlayTime”為【值】“[[PlayTme 1]]”，其中判斷條件中的“204”為音樂播放總時長的秒數。

全局變量設置見下圖：

條件判斷設置見下圖：

Case動作設置見下圖：

3.繼續上一步，添加動作【設置文本】于元件“PlayTime”為【值】

“[[‘0’.concat(Math.floor(PlayTime/60)).slice(-2)]]:[[‘0’.concat(Math.floor(PlayTime`)).slice(-2)]]”；因為，通過播放時長進行計算獲取的分鐘數和秒數有可能隻有1位數，所以，需要先把獲取結果前面補0後，再截取末尾兩位。

Case動作設置見下圖：

具體公式演變說明見下圖：

播放秒數→假設：PlayTime=200

獲取分鐘→PlayTime/60=200/600=3.33

Math.floor(PlayTime/60)=Math.floor(3.3)=3

獲取秒數→PlayTime`=200`=20

播放時間→[[Math.floor(PlayTime/60)]]:[[PlayTime`=200`=20]]=3:20

分鐘補0→[[‘0’.concat(Math.floor(PlayTime/60))]]=03

秒數補0→[[‘0’.concat(PlayTime`)]]=20

截取分鐘→[[‘0’.concat(Math.floor(PlayTime/60)).slice(-2)]]

截取秒數→[[‘0’.concat(PlayTime`.slice(-2))]]

最終函數→

[[‘0’.concat(Math.floor(PlayTime/60)).slice(-2)]]:[[‘0’.concat(Math.floor(PlayTime`)).slice(-2)]]

其中使用到的函數說明：

• Slice（參數1，參數2）：獲取文本對象中從起始位置到終止位置的字符串，位置從0開始計算；參數1為起始位置，參數2未終止位置，參數2可省略，省略時獲取到文本對象末尾；參數可以為負數，參數為負數時，位置是指從末尾向前計算，最後一位為-1，倒數第二位未-2，以此類推。
• Concat（參數）：将文本對象與參數中的字符串進行連接，組成新的文本；使用方式“[[文本對象.concat（參數）]]”。
• Math.floor（參數）：獲取參數向下取整的整數值，參數為小數。

4. 繼續上一步，添加動作【移動】元件“Slider”【到達】{x}“[[PlayTime/204*258 b.x]]”{y}“Target.y”的位置上；公式中“258”為進度條總長度減掉滑塊“Slider”的寬度，即播放開始到完全播放結束時，滑塊“Slider”橫向移動的最大範圍；用播放時長除以音樂總時長播放比例後乘以滑塊移動的最大範圍，就是滑塊從播放開始後所移動的距離；用這個距離再加上起始位置的x軸坐标值（b.x），就是滑塊“Slider”要移動到的x軸位置坐标；另外，因為滑塊“Slider”隻是橫向移動，y軸坐标沒有改動，所以，y軸就是被移動原件自己的y軸坐标；公式中的“b”為局部變量，其内容為元件“Background-Shape”的對講實例。

Case動作設置見下圖：

局部變量設置見下圖：

5. 繼續上一步，添加動作【設置尺寸】與元件“Progress-Bar”；{寬度}為“[[PlayTime/204*270]]”,{高度}為“1”；{錨點}為默認的【左上角】；公式中通過播放時長除以音樂總時長獲取播放比例後乘以進度條的總寬度“270”，即為進度條當前的寬度。

Case動作設置見下圖：

6. 繼續為動态面闆“LoopPanel”的【狀态改變時】事件添加“case2”，設置不滿足“case1”所設立的條件時，要執行的動作為【設置面闆狀态】于動态面闆“LoopPanel”；{選擇狀态}為【停止循環】。

Case動作設置見下圖：

7. 繼續上一步，添加動作【取消選中】元件“PlayButton”。

Case動作設置見下圖：

好了，到此這篇關于Axure字符串函數的應用案例分享基本介紹完了。最後提供的是上 述案例的原型模闆的源文件下載，大家可以結合本文中的相關介紹進行理解消化。

本文由 @Bruce2047 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自 Pexels，基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部