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

在實(shí)際生產(chǎn)過程中我們發(fā)現(xiàn)Axure的動(dòng)態(tài)面板原件可以提供強(qiáng)大的功能，比如滾動(dòng)條，但是滾動(dòng)條只能以原生效果展示，無法對(duì)其展示樣式進(jìn)行編輯。Axure的滾動(dòng)條的丑就屬于結(jié)構(gòu)性問題，我們無法解決這個(gè)問題但是可以繞過，即讓別人看到的Axure原型滾動(dòng)條是我們想讓對(duì)方看到的滾動(dòng)條。

一、準(zhǔn)備素材

這里用微信的界面來做展示，準(zhǔn)備素材（筆者這里主要用了動(dòng)態(tài)面板和中繼器，嗯，在動(dòng)態(tài)面板中充當(dāng)內(nèi)容的中繼器），拼搭出微信的界面，并準(zhǔn)備好你想要的滾動(dòng)條樣式，長(zhǎng)度隨意，因?yàn)槲覀儠?huì)在其載入時(shí)來控制具體的長(zhǎng)度。

接下來將該動(dòng)態(tài)面板的滾動(dòng)條展示出來，“右鍵”->“滾動(dòng)條”->“自動(dòng)顯示垂直滾動(dòng)條”

增加動(dòng)態(tài)面板的寬度（原寬度+18），然后在用一塊寬17的控件將整個(gè)滾動(dòng)條覆蓋住，并調(diào)整顏色，使其重新恢復(fù)第一張圖的效果

此時(shí)你就會(huì)發(fā)現(xiàn)你已經(jīng)獲得了一個(gè)隱藏了滾動(dòng)條的動(dòng)態(tài)面板

二、準(zhǔn)備交互

從這一步開始是相對(duì)比較重要的工作，這里我們需要清楚如何進(jìn)行交互達(dá)到讓別人看到我們想給他們看到的“滾動(dòng)條”的目的，可能有點(diǎn)繞，但簡(jiǎn)單來說，就是具體實(shí)現(xiàn)的邏輯。

說出來你可能不信，這比把大象關(guān)進(jìn)冰箱里要簡(jiǎn)單，因?yàn)檫壿嬌现恍枰獌刹剑?/p>

1. 在頁面載入時(shí)，將滾動(dòng)條調(diào)整為制定的比例
2. 在頁面滾動(dòng)時(shí)，相應(yīng)的移動(dòng)滾動(dòng)條的位置

是不是很簡(jiǎn)單？

正式開始準(zhǔn)備交互：

第一個(gè)公式 – 滾動(dòng)條的高度

• “滾動(dòng)條的高度”=“動(dòng)態(tài)面板高度”*“動(dòng)態(tài)面板高度”/“動(dòng)態(tài)面板中內(nèi)容的高度”

大家知道滾動(dòng)條是根據(jù)一定比例顯示的，這樣的比例控制可以使?jié)L動(dòng)條在頁面滾動(dòng)到頂端和低端時(shí)，“滾動(dòng)條（flower）”老老實(shí)實(shí)的待在界面內(nèi)而不會(huì)出墻，這里的墻就是“動(dòng)態(tài)面板（wall）”，而“動(dòng)態(tài)面板中內(nèi)容的高度（content）”在這里就是中繼器的高度。

如上圖所示，“滾動(dòng)條高度”=wall.height*wall.height/content.height

第二個(gè)公式 – 滾動(dòng)條的移動(dòng)

• “滾動(dòng)條的動(dòng)態(tài)位置”=“滾動(dòng)條的初始位置”+“動(dòng)態(tài)面板滾動(dòng)的y值”*“動(dòng)態(tài)面板高度”/“動(dòng)態(tài)面板中內(nèi)容的高度”

這里用的詞是“滾動(dòng)條的動(dòng)態(tài)位置”而不是“滾動(dòng)條的位移”，因?yàn)閷?shí)際上是在每次進(jìn)行滾動(dòng)操作之后將滾動(dòng)條移動(dòng)到對(duì)應(yīng)的位置，而不是實(shí)時(shí)一個(gè)像素一個(gè)像素的跟隨移動(dòng)。有“初始位置”是因?yàn)橐谩敖^對(duì)位移”，為什么要用“絕對(duì)位移”？好奇的朋友們可以自己用相對(duì)位移實(shí)驗(yàn)一下，后面也會(huì)提到。

“動(dòng)態(tài)面板滾動(dòng)的y值”*“動(dòng)態(tài)面板高度”/“動(dòng)態(tài)面板中內(nèi)容的高度”這部分也不難理解，因?yàn)椤皦Α钡母叨扔邢?，?nèi)容滾動(dòng)過的距離只能按比例的體現(xiàn)在滾動(dòng)條的移動(dòng)距離上。

三、交互制作

為控件命名

注意：在做交互的時(shí)候控件或者組一定要命名?。?！

控件命名如下圖：

初始化滾動(dòng)條

選中滾動(dòng)條，添加載入事件

設(shè)置當(dāng)前（滾動(dòng)條）元件的尺寸

添加對(duì)應(yīng)局部變量（動(dòng)態(tài)面板和中繼器），按照公式1編輯當(dāng)前元件的尺寸值

移動(dòng)滾動(dòng)條

選中動(dòng)態(tài)面板，添加“滾動(dòng)時(shí)”事件

動(dòng)態(tài)面板滾動(dòng)時(shí)移動(dòng)滾動(dòng)條至相應(yīng)位置，這里是用“絕對(duì)位移”，并且一定要添加動(dòng)畫，時(shí)間看自己需求

X的位置不變但是因?yàn)槭墙^對(duì)位移，所以這里的值要填寫滾動(dòng)條的x坐標(biāo)，在添加相應(yīng)的局部變量后，再編輯y公式。

“初始y值”比較好理解就是滾動(dòng)條在載入時(shí)的縱坐標(biāo)；

動(dòng)態(tài)面板滾動(dòng)的y值，可以這么理解，動(dòng)態(tài)面板是靜止不動(dòng)的，而其中的內(nèi)容每次上下移動(dòng)的之后，內(nèi)容頂端距離動(dòng)態(tài)面板頂端的距離，這個(gè)值總是正值，這也是無法用“相對(duì)位移”來處理的原因。

顯示、隱藏

微信滾動(dòng)條效果簡(jiǎn)化為“移動(dòng)時(shí)顯示，移動(dòng)結(jié)束后隱藏”，但是動(dòng)態(tài)面板并沒有滾動(dòng)結(jié)束的選項(xiàng)，這里可以設(shè)置一個(gè)等待事件來等滾動(dòng)條就位后再隱藏，也可以達(dá)到相應(yīng)的效果。

四、最后

這里筆者用的素材比較樸素，大家可以自行給滾動(dòng)條加效果，什么光圈、濾鏡都可以。

關(guān)于拖動(dòng)效果的滾動(dòng)條，其實(shí)也能做，真正做到微信的效果也是可以的，只是不可能模擬的那么流暢，大家可以自己研究下拖動(dòng)的，拖動(dòng)效果有個(gè)拖動(dòng)結(jié)束事件還是很好用的。

作者：慕卿風(fēng)華，爬行動(dòng)物產(chǎn)品經(jīng)理，4年互聯(lián)網(wǎng)行業(yè)，2年產(chǎn)品經(jīng)驗(yàn)。

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

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