這是一篇關(guān)于Axure字符串函數(shù)的應用案例分享，enjoy~

最近在計劃連載一下關(guān)于Axure的一些教程，Axure主要四個核心要素（難點）：動態(tài)面板、事件、函數(shù)、中繼器。我個人的觀點是動態(tài)面板和事件對應產(chǎn)品的交互設(shè)計、產(chǎn)品架構(gòu)；函數(shù)對應產(chǎn)品的業(yè)務邏輯，判定等；中繼器對應數(shù)據(jù)結(jié)構(gòu)，數(shù)據(jù)類型等；其中掌握函數(shù)的應用便能夠表達出產(chǎn)品中的復雜邏輯，今天給大家講解字符串函數(shù)的應用，下面看一組案例。

案例效果

見下圖：

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

元件準備

動態(tài)面板（用于循環(huán)動作效果）：LoopPanel

矩形（用于滑塊）：Slider

矩形（用于進度條）：ProgressBar

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

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

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

思路分析

①　播放時間每秒鐘自增1秒，需要通過循環(huán)實現(xiàn)；那么，點擊播放按鈕開始播放是就需要開啟循環(huán)；

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

③　播放狀態(tài)時，吧播放時長顯示在界面上；

④　播放狀態(tài)時，進度滑塊需要向右相應的移動；

⑤　播放狀態(tài)時，播放進度條也相應變長；

⑥　循環(huán)過程中，如果發(fā)現(xiàn)播放狀態(tài)為關(guān)閉或播放結(jié)束，我們都需要停止循環(huán)；

⑦　播放結(jié)束時，要讓播放按鈕變?yōu)殛P(guān)閉狀態(tài)；

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

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

操作步驟

1.?在播放按鈕【選中時】事件的“case1”中，添加新的動作【設(shè)置面板狀態(tài)】于動態(tài)面板“LoopPanel”，{選擇狀態(tài)}為【Next】，勾選【向后循環(huán)】的選項，勾選并設(shè)置【循環(huán)間隔】“1000”毫秒，勾選【首個狀態(tài)演示1000毫秒后切換】。

事件交互設(shè)置見下圖：

case動作設(shè)置見下圖

2.?創(chuàng)建全局變量“PlayTime”，設(shè)置默認值為“0”；然后為動態(tài)面板“LoopPanel”的【狀態(tài)改變時】事件添加“case1”，添加條件判斷【變量值】“PlayState”【==】“on”，并且【變量值】“PlayTime”【<】【值】“204”，設(shè)置滿足條件的動作為【設(shè)置變量值】“PlayTime”為【值】“[[PlayTme+1]]”，其中判斷條件中的“204”為音樂播放總時長的秒數(shù)。

全局變量設(shè)置見下圖：

條件判斷設(shè)置見下圖：

Case動作設(shè)置見下圖：

3.?繼續(xù)上一步，添加動作【設(shè)置文本】于元件“PlayTime”為【值】

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

Case動作設(shè)置見下圖：

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

播放秒數(shù)→假設(shè)：PlayTime=200

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

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

獲取秒數(shù)→PlayTime%60=200%60=20

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

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

秒數(shù)補0→[[‘0’.concat(PlayTime%60)]]=20

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

截取秒數(shù)→[[‘0’.concat(PlayTime%60.slice(-2))]]

最終函數(shù)→

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

其中使用到的函數(shù)說明：

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

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

Case動作設(shè)置見下圖：

局部變量設(shè)置見下圖：

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

Case動作設(shè)置見下圖：

6.?繼續(xù)為動態(tài)面板“LoopPanel”的【狀態(tài)改變時】事件添加“case2”，設(shè)置不滿足“case1”所設(shè)立的條件時，要執(zhí)行的動作為【設(shè)置面板狀態(tài)】于動態(tài)面板“LoopPanel”；{選擇狀態(tài)}為【停止循環(huán)】。

Case動作設(shè)置見下圖：

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

Case動作設(shè)置見下圖：

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

下載地址：https://pan.baidu.com/s/1usRIb7NytJZmXwlvzMxHwA

本文由 @Bruce2047 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議