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

在各類產(chǎn)品中，關(guān)于進(jìn)度條的展現(xiàn)方式各異，而筆者選擇了常見(jiàn)的勻速環(huán)形進(jìn)度條，向我們展示了用Axure制作的要點(diǎn)與邏輯。

01 最終效果

• 元件加載環(huán)形（圓形）進(jìn)度條自動(dòng)增長(zhǎng)（勻速）
• 百分比數(shù)值跟隨變化
• 進(jìn)度條增長(zhǎng)到一定長(zhǎng)度停止增長(zhǎng)（百分比跟隨停止）

02 注意事項(xiàng)

• 本教程用Axure9作為教程說(shuō)明工具（Axure8可適用）
• 本教程對(duì)于Axure基本操作不做贅述

03 制作難點(diǎn)

• 實(shí)現(xiàn)思路的邏輯（循環(huán)事件的應(yīng)用）
• 全局變量與交互事件的應(yīng)用

04 元件準(zhǔn)備

圖中帶有閃電標(biāo)識(shí)表示有創(chuàng)建交互事件的元件：

05 交互邏輯思路

1. 元件載入（2號(hào)元件）設(shè)置文本框（5號(hào)元件）的文本為 0

• 說(shuō)明a：文本框（5號(hào)元件）文本默認(rèn)文本不為0，此時(shí)設(shè)置為0，即改變了文本框（5號(hào)元件）的文本；
• 說(shuō)明b：當(dāng)文本框（5號(hào)元件）文本改變時(shí)，同時(shí)執(zhí)行百分比文本標(biāo)簽（6號(hào)元件）百分比數(shù)值勻速增長(zhǎng)和環(huán)形（圓形）進(jìn)度條同速度勻速增長(zhǎng)。

2. 怎么實(shí)現(xiàn)百分比文本標(biāo)簽（6號(hào)元件）百分比數(shù)值勻速增加？

文本框（5號(hào)元件）設(shè)置如果全局變量的值小于97，那么執(zhí)行等待37毫秒。

設(shè)置全局變量的數(shù)值加1（全局變量初始值為0）；

設(shè)置百分比的數(shù)值部分為全局變量的數(shù)值；

設(shè)置文本框（5號(hào)元件）的文本為全局變量。

說(shuō)明a：等待37毫秒的37毫秒怎么來(lái)的？

設(shè)計(jì)環(huán)形（圓形）進(jìn)度條如果自增長(zhǎng)至圓環(huán)的時(shí)間為4000毫秒，對(duì)應(yīng)百分比數(shù)值為100%，那么百分比數(shù)值增加1%，用的時(shí)間為4000/100=40毫秒。

經(jīng)實(shí)際測(cè)試，40毫秒調(diào)整為37毫秒，百分比數(shù)值增長(zhǎng)與環(huán)形（圓形）進(jìn)度條增長(zhǎng)速度一致。（為什么，作者也沒(méi)搞明白，有知道的告訴我）

說(shuō)明b：百分比增長(zhǎng)是什么原理實(shí)現(xiàn)的？

文本框（5號(hào)元件）文本改變時(shí)就設(shè)置全局變量加1，緊接著設(shè)置新的全局變量給文本框 （5號(hào)元件），從而導(dǎo)致文本框（5號(hào)元件）文本改變時(shí)，從而又執(zhí)行一次此事件，形成循環(huán)事件。

3. 怎么實(shí)現(xiàn)環(huán)形（圓形）進(jìn)度條的自增長(zhǎng)？

緊接著步驟1，元件載入（2號(hào)元件）設(shè)置文本框（5號(hào)元件）的文本為0；

旋轉(zhuǎn)右側(cè)半圓180度，勻速用時(shí)2000毫秒；

等待2000毫秒 旋轉(zhuǎn)左側(cè)半圓169.2度，用時(shí)1880毫秒。

說(shuō)明a：旋轉(zhuǎn)左側(cè)半圓為什么169.2度，用時(shí)1880毫秒？

最終效果需要在百分比97%已經(jīng)對(duì)應(yīng)環(huán)形（圓形）進(jìn)度條97%的位置停止自增長(zhǎng)。

360度對(duì)應(yīng)圓環(huán)100%，97%圓環(huán)對(duì)應(yīng)349.2度，右側(cè)半圓全部走完180度，左側(cè)半圓剩下349.2-180=169.2度。

4000毫秒對(duì)應(yīng)圓環(huán)100%，97%圓環(huán)對(duì)應(yīng)3880毫秒。右側(cè)半圓全部走完需要2000毫秒，3880-2000=1880毫秒。

詳解右側(cè)動(dòng)態(tài)面板在轉(zhuǎn)動(dòng)半圓中的結(jié)構(gòu)：

分解后的動(dòng)態(tài)圖：

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

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