中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

這是一篇關于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%60)).slice(-2)]]”；因為，通過播放時長進行計算獲取的分鐘數和秒數有可能只有1位數，所以，需要先把獲取結果前面補0后，再截取末尾兩位。

Case動作設置見下圖：

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

播放秒數→假設：PlayTime=200

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

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

獲取秒數→PlayTime%60=200%60=20

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

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

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

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

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

最終函數→

[[‘0’.concat(Math.floor(PlayTime/60)).slice(-2)]]:[[‘0’.concat(Math.floor(PlayTime%60)).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字符串函數的應用案例分享基本介紹完了。最后提供的是上 述案例的原型模板的源文件下載，大家可以結合本文中的相關介紹進行理解消化。

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

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

題圖來自 Pexels，基于 CC0 協議