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

編輯導(dǎo)讀：動態(tài)進(jìn)度條是產(chǎn)品的一個(gè)基礎(chǔ)功能，如何用Axure實(shí)現(xiàn)動態(tài)進(jìn)度條效果？本文作者對此進(jìn)行了分析，希望對你有幫助。

界面原型想要用動態(tài)進(jìn)度條，原本想在網(wǎng)上找一個(gè)現(xiàn)成的用，沒想到都是坑，索性自己做了一個(gè)，分享給大家（附詳細(xì)步驟）。

一、不帶動文字的進(jìn)度條

①創(chuàng)建矩形，命名“bg”，作為進(jìn)度條的整體背景,設(shè)置width=600，hight=20,圓角=4，背景色“#f2f2f2”,如下圖：

②復(fù)制上一個(gè)矩形，重命名為“pro”，作為進(jìn)度條，設(shè)置背景色為“#57C188”，width=1，hight保持一致即可，并使兩個(gè)矩形首端對齊，如下圖：

③添加事件交互，選擇“pro”矩形，設(shè)置矩形載入設(shè)原件尺寸，點(diǎn)擊寬度fx，添加“bg”為局部變量，設(shè)置寬度為[[bg.width]，高度不變，如下圖：

④設(shè)置錨點(diǎn)“左側(cè)、上下居中”，動畫為“線性”，事件“3000”毫秒，確定，如下圖：

⑤確定后預(yù)覽看效果。

二、含動態(tài)文字的進(jìn)度條

①創(chuàng)建矩形，命名“bg”，作為進(jìn)度條的整體背景,設(shè)置width=600，hight=20,圓角=4，背景色“#f2f2f2”,如下圖：

②復(fù)制上一個(gè)矩形，重命名為“pro”，作為進(jìn)度條，設(shè)置背景色為“#57C188”，width此處可以隨便設(shè)置（后邊需要在載入時(shí)設(shè)置一個(gè)初始尺寸），hight保持一致即可，如下圖：

③添加文本標(biāo)簽，命名“per”，顯示百分比，設(shè)置字號“18”，并對齊，如下圖：

④選中矩形“pro”添加“載入時(shí)”交互事件，選“設(shè)置原件尺寸”，創(chuàng)建進(jìn)度條“pro”的初始尺寸，如下圖：

點(diǎn)擊寬度fx,添加背景“bg”為局部變量，設(shè)置進(jìn)度條初始尺寸為[[bg,width/100]],進(jìn)度條背景的1%；

⑤繼續(xù)為矩形“pro”添加交互事件“尺寸改變時(shí)”，設(shè)置矩形“pro”的寬度為[[This.with+bg.width/100]]，此處依然需要添加背景“bg”為局部變量，如下圖：

該設(shè)置是為了，進(jìn)度條每次增加1%的長度，繼續(xù)設(shè)置錨點(diǎn)為“左側(cè)、上下居中”，動畫為“線性”，時(shí)間為“50”毫秒（此處時(shí)間決定進(jìn)度條的快慢），如下圖：

⑥設(shè)置文本標(biāo)簽“per”的顯示文字，如下圖：

設(shè)置文本標(biāo)簽文字為[[Math.floor(This.width/bg.width*100)+1]]%，Math.floor()為取整函數(shù)。

⑦設(shè)置動態(tài)顯示，“啟用情形”，當(dāng)This.width< LVAR1.width時(shí)（添加元件bg為局部變量“LVAR1”），執(zhí)行“尺寸改變時(shí)”的交互事件，如下圖：

⑧預(yù)覽看效果，搞定！??！

在線預(yù)覽地址：https://s2d9ly.axshare.com/#id=bix75t&p=%E8%BF%9B%E5%BA%A6%E6%9D%A1

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

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