Axure8.0教程:模擬滑動(dòng)效果

2 評(píng)論 6440 瀏覽 20 收藏 5 分鐘

本文簡要地為大家展示了,如何Axure8.0模擬縱向滑動(dòng)的效果,enjoy~

好長時(shí)間不怎么玩兒Axure了,以至于很多功能都有點(diǎn)快忘記了,今天下午無聊就想在網(wǎng)上找了一圈關(guān)于Axure怎么做縱向滑動(dòng)的,終于找到了一個(gè)寫的挺詳細(xì)的,但是定義了很多的變量,加上功能還不是很全面,這可難為死處女座的我了,于是我潛下心來花了十五分鐘,做出來了個(gè)我自認(rèn)為還可以又簡單易懂的教程,供大家學(xué)習(xí)Axure。

但是還是有點(diǎn)小bug,bug的根源是如果原型的起始點(diǎn)不是(0.0)的時(shí)候拖動(dòng)的時(shí)候有問題,我還沒有想到怎么解決。有大腿會(huì)的話留言和我說下!

首先放源文件鏈接:https://pan.baidu.com/s/1aIWrqYjLHTTdRwBbq8wHcw 提取碼:v79h

第一步:準(zhǔn)備工作

先準(zhǔn)備一個(gè)動(dòng)態(tài)面板兩個(gè)底部的ico,我懶就隨便弄了倆矩形,然后,給命名成tab1和tab2。這里沒放圖,是元件命名的那個(gè)地方;然后給動(dòng)態(tài)面板起個(gè)名字——page1。

里面兩個(gè)狀態(tài)頁面默認(rèn)的就好,我這里是state1和state2,話不多,上圖:

動(dòng)態(tài)面板的里面很簡單,把動(dòng)態(tài)面板里面的內(nèi)容組合起來命名為page_tab1和page_tab2,就和上面顯示出來的差不多,但是要比動(dòng)態(tài)面板的長度要高一點(diǎn),就不放圖了。

第二步:開始寫交互事件

2.1 左右滑動(dòng)事件

選中動(dòng)態(tài)面板,屬性>向左拖動(dòng)結(jié)束>添加條件>選中狀態(tài),這里選擇tab1值等于ture。

既然要滑動(dòng)肯定要有動(dòng)態(tài)切換,設(shè)置動(dòng)態(tài)面板page1的選擇狀態(tài)為state2,動(dòng)畫可以根據(jù)自己喜好來加,看其他人的教程都沒有考慮過下面這兩個(gè)tab的切換問題,所以我寫了這個(gè)教程。

頁面已經(jīng)切換了,那么底部的TabBar的狀態(tài)當(dāng)然要變更,這就就是設(shè)置下面的選中狀態(tài)為tab2。

最后移動(dòng)page_tab2移動(dòng)到(0.0)意思就是切換的時(shí)候刷新頁面,不想刷新可以不設(shè)置,這里只放一個(gè)綜合的,話不多看圖:

然后同理在設(shè)置一遍向左滑動(dòng)時(shí)候狀態(tài).

2.2 上下滑動(dòng)事件

首先和左右滑動(dòng)一樣 先判斷選中狀態(tài),和上面的一樣,我就不上圖了。

選擇移動(dòng),當(dāng)動(dòng)態(tài)面板選中的是state1的話,就選擇state1里面的那個(gè)頁面,里面的組合頁面我這里是page_tab1。

接下來需要給上下滑動(dòng)添加一個(gè)界限,我這里用的變量,頂部使用小于等于,底部使用大于等于,當(dāng)然也可以使用絕對(duì)位置,為了裝X我用的變量,用絕對(duì)位置的話頂部是0,底部是你動(dòng)態(tài)面板高度值。

接下來我說下變量怎么選。

增加一個(gè)局部變量,名字隨便,我命名的是bg,讓bg這個(gè)原件的值等于page1也就是動(dòng)態(tài)面板的值,最后插入這個(gè)變量,使用[[bg.top]]來定義滑動(dòng)的頂部,同樣的方法在定義一個(gè)bg然后插入一個(gè)變量,使用[[bg.bottom]]來定義滑動(dòng)的底部。

同理,在判斷當(dāng)選中條件等于state2的時(shí)候,選擇在把動(dòng)態(tài)面板里面的state2按照上面的步驟再來一遍,就OK了!

 

本文由 @報(bào)廢扣兒 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 感謝分享,新手請(qǐng)教個(gè)問題,如果滑動(dòng)時(shí)斜著滑↗↘↖↙,可能會(huì)誤判,例如我在右頁面往下滑,肯定不會(huì)絕對(duì)垂直向下滑動(dòng),一般都是往右上方↗滑動(dòng),這時(shí)可能會(huì)判斷我右滑導(dǎo)致切換到左頁面,這種情況axure能處理嗎,比如傾斜到什么程度能充分判斷用戶是真的想右滑,實(shí)際工程中有這方面的問題嗎。

    來自江蘇 回復(fù)
    1. 可以設(shè)置的,設(shè)置移動(dòng)的那個(gè)環(huán)節(jié)有的

      回復(fù)