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

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

案例效果

見下圖：

描述：當(dāng)單擊播放按鈕是，進(jìn)度條顯示已播放時(shí)間，同時(shí)圓形滑塊向右移動(dòng)

元件準(zhǔn)備

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

矩形（用于滑塊）：Slider

矩形（用于進(jìn)度條）：ProgressBar

矩形（用于進(jìn)度條灰色背景）：BackgroundShape

文本標(biāo)簽（用于顯示播放時(shí)間）：PlayTime

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

思路分析

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

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

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

④　播放狀態(tài)時(shí)，進(jìn)度滑塊需要向右相應(yīng)的移動(dòng)；

⑤　播放狀態(tài)時(shí)，播放進(jìn)度條也相應(yīng)變長；

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

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

⑧　播放結(jié)束時(shí)，進(jìn)度條保持在當(dāng)前位置；

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

操作步驟

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

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

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

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

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

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

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

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

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

Case動(dòng)作設(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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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