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

在移動(dòng)端操作中，拖動(dòng)擺放圖標(biāo)起著相對(duì)重要的作用，那么我們有沒有可能在Axure中利用中繼器，制作拖動(dòng)擺放的交互效果呢？本文作者便進(jìn)行了拆解，一起來看。

拖動(dòng)擺放圖標(biāo)在移動(dòng)端操作中扮演了重要的角色，允許用戶自定義其設(shè)備的界面，使其更符合其偏好和使用習(xí)慣。這可以提高用戶對(duì)設(shè)備的滿意度和舒適度，將最常用的應(yīng)用放置在易于訪問的位置，從而提高使用效率。

所以拖動(dòng)擺放這類型操作不僅提高了用戶的個(gè)性化體驗(yàn)，還提高了操作效率和設(shè)備的可用性。這是移動(dòng)操作系統(tǒng)為用戶提供的一種強(qiáng)大工具，有助于更好地滿足用戶的需求。

那今天作者就教大家，如何在Axure用中繼器，制作拖動(dòng)擺放的交互效果，制作完成后可以實(shí)現(xiàn)一下效果：

一、效果展示

1）拖動(dòng)效果：鼠標(biāo)可以拖動(dòng)各個(gè)圖標(biāo)，對(duì)應(yīng)的圖標(biāo)可以跟隨鼠標(biāo)移動(dòng)。

2）自動(dòng)排列效果：拖動(dòng)過程其他圖標(biāo)可以根據(jù)拖動(dòng)圖標(biāo)所在的位置自動(dòng)排列。

原型地址：https://12pjb1.axshare.com/#g=1

二、制作教程

那這個(gè)模板我們用中繼器來制作，因?yàn)橹欣^器制作完成之后，下次使用，我們只需要在中繼器表格里導(dǎo)入圖片和文字，即可自動(dòng)生成交互效果，復(fù)用性比較強(qiáng)

1. 中繼器網(wǎng)格的制作

我們需要新建一個(gè)中繼器，在里面放置背景矩形、圖片元件和文本標(biāo)簽，如下圖所示：

在中繼器表格的布局里面我們可以設(shè)置為網(wǎng)格布局，根據(jù)自身需要設(shè)置每行項(xiàng)目數(shù)，案例中是水平分布，每行4個(gè)；

其中文本標(biāo)簽和圖片需要轉(zhuǎn)為動(dòng)態(tài)面板，因?yàn)锳xure里面只有動(dòng)態(tài)面板才有拖動(dòng)這個(gè)交互。

中繼器表格里面我們需要增加4列：

• no列：按123456……順序填寫即可，后續(xù)用于排序
• pic列：對(duì)應(yīng)的圖片，可以鼠標(biāo)右鍵導(dǎo)入本地圖片，也可以填寫線上圖片的地址
• text列：填寫對(duì)應(yīng)的文字
• tuodong列：默認(rèn)為空即可，后續(xù)用于標(biāo)識(shí)哪一行被拖動(dòng)

我們要將圖片和文字設(shè)置到中繼器對(duì)應(yīng)的圖片和文本標(biāo)簽的元件里，如果你用的是Axure10，直接點(diǎn)中繼器表格里的連接，選擇對(duì)應(yīng)元件的就可以了。如果你是Axure8、9，就要在中繼器每項(xiàng)加載時(shí)填寫交互，分別用設(shè)置文本和設(shè)置圖片的交互，將文本值和圖片值設(shè)置到文本標(biāo)簽和圖片元件里。

這樣網(wǎng)格列表就顯示出來了。

2. 拖動(dòng)前的準(zhǔn)備

我們?cè)谕蟿?dòng)之前，要先準(zhǔn)備一個(gè)回顯拖動(dòng)圖標(biāo)文字的組合，因?yàn)橹欣^器里每一行的都獨(dú)立的，如果在中繼器里面顯示拖動(dòng)效果，就會(huì)將拖動(dòng)行變高，這樣往后拖動(dòng)就不能顯示自動(dòng)擺放的效果。

所以我們需要增加一個(gè)組合，組合包括圖片和文本標(biāo)簽，這里和上面的是一樣的，尺寸和大小都是一樣的，默認(rèn)隱藏即可。

在鼠標(biāo)拖動(dòng)動(dòng)態(tài)面板時(shí)，我們用顯示的交互，將這個(gè)組合顯示出來，然后用設(shè)置文本和設(shè)置圖片的交互，將文本值和圖片值設(shè)置到文本標(biāo)簽和圖片元件里。

這樣就可以拖動(dòng)，但是我們要將這個(gè)組合移動(dòng)到我們鼠標(biāo)指針的位置，這里我們可以用cursor函數(shù)，分別獲取鼠標(biāo)的x坐標(biāo)值和y坐標(biāo)值，獲取之后，如果想指針的在圖片的中心點(diǎn)，我們還需要分別減去這個(gè)組合一半的寬度和一般的高度。

因?yàn)榍懊嬲f到，如果在中繼器里面顯示拖動(dòng)效果，就會(huì)將拖動(dòng)行變高，這樣往后拖動(dòng)就不能顯示自動(dòng)擺放的效果。所以我們要將拖動(dòng)行里的動(dòng)態(tài)面板先隱藏起來，我們可以通過控制tuodong列的值來控制他是否顯示，如果拖動(dòng)列的值等于1，我們就用隱藏的交互，將動(dòng)態(tài)面板隱藏，否則就顯示。所以我們?cè)谕蟿?dòng)開始的時(shí)候，就要用更新行的交互，將拖動(dòng)列的值更新為1。

3. 拖動(dòng)的交互

在鼠標(biāo)拖動(dòng)動(dòng)態(tài)面板時(shí)，我們用移動(dòng)的交互，讓顯示組合跟隨鼠標(biāo)移動(dòng)，這樣就可以讓拖動(dòng)的組合跟隨鼠標(biāo)移動(dòng)。

在拖動(dòng)的過程中，我們還要對(duì)其余圖標(biāo)進(jìn)行按順序擺放。

這里我們其實(shí)要用到的根據(jù)no列來按順序擺放，例如將5拖動(dòng)到2和3之間，這是我們把原來的3、4的no值改成4和5，將拖動(dòng)圖標(biāo)所在行更新為3，這樣拖動(dòng)排序的交互，原來的5，就可以在3的位置，原來的3、4，就變成4、5了，這個(gè)就是基礎(chǔ)的原理。

所以我們?cè)谥欣^器載入時(shí)，先寫一個(gè)排序事件，讓中繼器按no列升序排列。

在拖動(dòng)的時(shí)候，如果鼠標(biāo)指針接觸到對(duì)于圖標(biāo)背景矩形的范圍，我們就用更新交互，更新對(duì)應(yīng)對(duì)應(yīng)行的no列的序號(hào)值。

這里向前拖動(dòng)和向后拖動(dòng)的情況是不一樣的，如果將5向前拖動(dòng)到2后面，那3、4就要變成4、5，是加1；如果將2拖動(dòng)到5前面，那3、4是就要變成2、3是減一。

所以在拖動(dòng)開始的時(shí)候，我們還要用設(shè)置文本的交互，將拖動(dòng)的行的序號(hào)記錄下來，我們?cè)黾右粋€(gè)記錄的文本標(biāo)簽。

如果記錄的值>鼠標(biāo)移入對(duì)應(yīng)行的no值，就是向前移動(dòng)，在更新行之前，我們要將移入行的no值記錄起來，因?yàn)楦轮缶蜁?huì)不一樣了，所以要事先記錄。可以在外面增加一個(gè)隱藏的文本標(biāo)簽，用設(shè)置文本的交互，將他記錄起來。

然后用更新行的交互，目標(biāo)行大于等于當(dāng)前行no值且小于等于拖動(dòng)行記錄的no值的行（不包括拖動(dòng)的行），將他們的no值變成原來的值+1。

完成后在將拖動(dòng)行no的值更新為我們之前選移動(dòng)行的no值。

如果記錄的值<鼠標(biāo)移入對(duì)應(yīng)行的no值，就是向后移動(dòng)，這里和前面一樣，在更新行之前，我們要將移入行的no值記錄起來，因?yàn)楦轮缶蜁?huì)不一樣了，所以要事先記錄?？梢栽谕饷嬖黾右粋€(gè)隱藏的文本標(biāo)簽，用設(shè)置文本的交互，將他記錄起來。

然后用更新行的交互，目標(biāo)行小于等于當(dāng)前行no值且大于等于拖動(dòng)行記錄的no值的行（不包括拖動(dòng)的行），將他們的no值變成原來的值+1。

完成后在將拖動(dòng)行no的值更新為我們之前選移動(dòng)行的no值。

這樣就完成一次判斷，因?yàn)橐苿?dòng)的過程是動(dòng)態(tài)的，所以我們需要不端的去判斷，來排序，所以我們可以給這個(gè)交互寫給循環(huán)，用等待事件和觸發(fā)事件，經(jīng)過指定時(shí)間觸發(fā)一次交互，案例中是0.01秒。

最后拖動(dòng)結(jié)束后，我們用隱藏的交互，將顯示的組合設(shè)置為隱藏。然后還要將中繼器里前面拖動(dòng)開始時(shí)隱藏起來的內(nèi)容重新顯示，因?yàn)榍懊媸峭ㄟ^tuodong列的值來控制是否顯示的，tuodong列的值等于1就隱藏，所以我們用更新行的交互，將當(dāng)前行tuodong列的值更新為不等于1的任意值即可，一般我習(xí)慣用0。

這樣我們就完成了中繼器網(wǎng)格拖動(dòng)擺放的原型模板，后續(xù)使用也很方便，只需要在中繼器表格里導(dǎo)入圖標(biāo)和填寫對(duì)應(yīng)的文字，即可自動(dòng)生成拖動(dòng)擺放的交互效果。

那以上就是本期教程的全部?jī)?nèi)容，感興趣的同學(xué)們可以動(dòng)手試試哦，感謝您的閱讀，我們下期見。