Axure8.0教程:模擬滑動效果
本文簡要地為大家展示了,如何Axure8.0模擬縱向滑動的效果,enjoy~
好長時間不怎么玩兒Axure了,以至于很多功能都有點快忘記了,今天下午無聊就想在網上找了一圈關于Axure怎么做縱向滑動的,終于找到了一個寫的挺詳細的,但是定義了很多的變量,加上功能還不是很全面,這可難為死處女座的我了,于是我潛下心來花了十五分鐘,做出來了個我自認為還可以又簡單易懂的教程,供大家學習Axure。
但是還是有點小bug,bug的根源是如果原型的起始點不是(0.0)的時候拖動的時候有問題,我還沒有想到怎么解決。有大腿會的話留言和我說下!
首先放源文件鏈接:https://pan.baidu.com/s/1aIWrqYjLHTTdRwBbq8wHcw 提取碼:v79h
第一步:準備工作
先準備一個動態面板兩個底部的ico,我懶就隨便弄了倆矩形,然后,給命名成tab1和tab2。這里沒放圖,是元件命名的那個地方;然后給動態面板起個名字——page1。
里面兩個狀態頁面默認的就好,我這里是state1和state2,話不多,上圖:
動態面板的里面很簡單,把動態面板里面的內容組合起來命名為page_tab1和page_tab2,就和上面顯示出來的差不多,但是要比動態面板的長度要高一點,就不放圖了。
第二步:開始寫交互事件
2.1 左右滑動事件
選中動態面板,屬性>向左拖動結束>添加條件>選中狀態,這里選擇tab1值等于ture。
既然要滑動肯定要有動態切換,設置動態面板page1的選擇狀態為state2,動畫可以根據自己喜好來加,看其他人的教程都沒有考慮過下面這兩個tab的切換問題,所以我寫了這個教程。
頁面已經切換了,那么底部的TabBar的狀態當然要變更,這就就是設置下面的選中狀態為tab2。
最后移動page_tab2移動到(0.0)意思就是切換的時候刷新頁面,不想刷新可以不設置,這里只放一個綜合的,話不多看圖:
然后同理在設置一遍向左滑動時候狀態.
2.2 上下滑動事件
首先和左右滑動一樣 先判斷選中狀態,和上面的一樣,我就不上圖了。
選擇移動,當動態面板選中的是state1的話,就選擇state1里面的那個頁面,里面的組合頁面我這里是page_tab1。
接下來需要給上下滑動添加一個界限,我這里用的變量,頂部使用小于等于,底部使用大于等于,當然也可以使用絕對位置,為了裝X我用的變量,用絕對位置的話頂部是0,底部是你動態面板高度值。
接下來我說下變量怎么選。
增加一個局部變量,名字隨便,我命名的是bg,讓bg這個原件的值等于page1也就是動態面板的值,最后插入這個變量,使用[[bg.top]]來定義滑動的頂部,同樣的方法在定義一個bg然后插入一個變量,使用[[bg.bottom]]來定義滑動的底部。
同理,在判斷當選中條件等于state2的時候,選擇在把動態面板里面的state2按照上面的步驟再來一遍,就OK了!
本文由 @報廢扣兒 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
感謝分享,新手請教個問題,如果滑動時斜著滑↗↘↖↙,可能會誤判,例如我在右頁面往下滑,肯定不會絕對垂直向下滑動,一般都是往右上方↗滑動,這時可能會判斷我右滑導致切換到左頁面,這種情況axure能處理嗎,比如傾斜到什么程度能充分判斷用戶是真的想右滑,實際工程中有這方面的問題嗎。
可以設置的,設置移動的那個環節有的