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

原型工具有多種，為何我確對Axure情有獨鐘？ 看了你就明白他的強大。

本文重點是自己制作經驗分享，視覺元素是次要（自己搞的界面，歡迎UI同學提上你的寶貴意見）。本次教程分享的是移動APP端的左側滑菜單，在制作的時候，我們應該對左側滑菜單有如下理解。

• 側滑菜單拉出需要觸發條件，如必須從最左側（或者靠近左側一定范圍）往右滑動才能拉出菜單。
• 側滑菜單需要對滑動距離應有一定的反應，如拉動距離不足10時候，菜單退回，距離大于10完全滑出。

以上就是對交互的重點，了解到上面的條件后，我們可以開始制作左滑菜單了。在這里，還有一個難點和重點需要和大家分享，如何在內聯框架中的頁面操作，影響父級頁面的行為。解釋一下，就是你在內聯框架打開的子頁面，發生事件后需要父級框架作出響應。

并且下期Axure教程預告-中繼器元件大小，根據你錄入的文字動態調整尺寸。

容器框架搭建及簡單處理

框架搭建，主要是由三個元件構成，尺寸調制合適即可。

• 外觀框架（自己畫的，簡陋了點）
• 底部導航欄-Tabbar
• 空白頁面-內聯框架

事件設置-載入時在內聯框架中打開首頁。

首頁搭建及簡單處理

首頁是我們對側滑行為作出反應的操作頁，一系列事件都需要在上面完成，下面直接使用我最近做的首頁，只講重點元件。

基礎搭建

首頁主要元件三個：

• 一個是主要內容面板-動態面板，我們的拖動滑動等手勢行為，都應在這里才能進行交互感應。
• 一個是我們的側滑菜單，元件類型皆可。
• 一個是我們的遮罩層-動態面板，尺寸大小和內容面板一樣，遮罩層在這里的作用即是位于內容面板之上，側滑菜單之下，用于防止用戶在側滑菜單后誤觸內容內容面板的遮罩層，我們設置背景為黑色，透明度為百分之30，這樣一個防誤觸遮罩層就出來了。

元件位置：

內容面板位置坐標為 x->0 ?y->0 ? ,方便在父級容器框架中正好完美契合。

側滑菜單，設側滑菜單的寬度為cH， 當側滑事件開始的時候，應該是在內容面板 x-ch ，y坐標不變。在這里舉例我就按照實際數字（側滑菜單寬度為：122）寫了。通俗說，就是在內容面板左側并排。

遮罩層，尺寸和內容面板一樣，位置坐標為x->內容面板寬度 ，y 坐標不變。通俗說，就是在內容面板位置右側并排。

調整后的相對位置是如下放置（這里是為了方便展示位置調成這樣），紅色標注為主視覺

實際位置應是這樣：

這樣我們在內聯框架打開的時候，只看見綠色的主內容面板。

當然，我們也可以設置事件來調整元件坐標，x坐標根據你的內容面板和菜單寬度來進行調整。

這樣基本尺寸我們算是調整完畢了，可以在網頁中預覽一下。 無誤的應是下圖。

以上，基礎搭建完畢。下面開始進行側滑事件設置。

側滑事件設置

元件：內容面板-動態面板

事件：

拖動開始時：

還記得側滑條件么，必須要是在左側邊緣才能觸發菜單拉動，在Axure的函數中，有一個是記錄你滑動開始時的的坐標點，這里我們用全局變量記錄下來側滑開始的x坐標，只用記錄x坐標即可，y坐標這里用不上。

重點：

拖動開始時-設置 變量值為當前觸摸點x坐標。

說明：

全局變量自己取名，我這里叫SlideJudge，中午意思大概就是滑動判斷；

[[Cursor.x]]表示你觸摸點的x坐標 ；

事件必須是在拖動開始時。

拖動時：

拖動時讓側滑菜單元件一起拖動事件很簡單，但是重點是細節，這里有幾個個細節。

（１）拖動條件，必須全局變量SlideJudge（觸摸點） ?的X坐標應該小于某一個值才能觸發側滑菜單拖動。

（２）側滑菜單拖動的邊界值設置，通俗說就是你不能往右側滑到中間或者靠右邊的位置，我們想要的效果 ? ? ? 應該是側滑菜單滑到盡頭的時候應該就停止滑動了。左滑應該也是如此，這里附上圖，數字不是最重 ? ? ? 要的，重要的理解數字代表的意思。 122是表示側滑菜單的寬度。

重點： 水平拖動，動畫無，邊界距離設置

（３）遮罩層的移動，我們直接將遮罩層移動到覆蓋主視圖即可，具體數字在實際情況中而定。細節就是我 ? ? ?們必須要使遮罩層層級在內容視圖之上，側滑菜單之下。至于動畫效果和時間，看哪個效果滿意即 ? ? ? ? ?可。

我們來看看效果圖，這樣，你在你設置的全局變量<某值的時候是不能拉動側滑菜單的，只有滿足條件才能拉出菜單。

底下很難看的Tabbar后面單獨講，這里也是重點，怎樣在內聯框架的子頁面中影響父級頁面的事件操作。

最簡單的完了，重點開始：

拖動結束時：

我們拖動結束是有幾個判斷，就是拖動距離大于某個值使，側滑菜單完全拉出，小于某個值的時候，側滑菜單完全退出。

函數講解：

TotalDragX ：

首先是以x坐標為參考點，表示你觸摸點開始，到你滑動停止的距離大小，比如我開始滑動時，x坐標為20，停止滑動的時候，x坐標為120 ，則此函數表示值為100；停止滑動x坐標為0，則此函數代表值為-20 。

重點：此函數值的有正負值，正值表示你往右滑，負值表示往右滑。

此時我們即可設置判斷，拖動結束時，如果拖動距離大于某值，則完全彈出菜單，否則則退出菜單。

• 完全彈出菜單即設置 ?側滑菜單-移動-絕對距離- ?x-0,y-0。 此時可設置動畫效果。
• 完全退出菜單即設置 ?回到拖動前位置即可 。此時可設置動畫效果。

補充一點，當我們拖動結束距離小于某值的時候，也就是菜單完全退出的時候，也應該將遮罩層移除。

具體看圖：

到了這里，我們就完全解決了拉出菜單這個問題。接下來我們要處理-退出菜單的事件。相信到了這里，大家也明白側滑菜單退出操作應該也是和拉出相似了。但是還是有幾個重點需要說明。

其實事情不是那么簡單，還有重要的一步，也就是BUG，如果我們拖動開始x坐標是大于某值，雖然拖動時，側滑菜單沒有出現，但是如果我們拖動距離大于某值的時候， 你會發現側滑菜單還是完全出現了，這時候這種情況是我們不希望看見的，處理方法很簡單，就是在 拖動結束時再加一個判斷，判斷拖動點是否在邊緣。

具體看圖：

滑出設置：

元件：

遮罩層

事件：

拖動時：

由于我們內容面板已經被遮罩層覆蓋，所以這里我們需要把拖動事件移到遮罩層上來。 拖動時設置如下，此時不需要判斷是否是從左側邊緣拖動，在這里我也加入了邊界值，防止拖動過界問題。

接下來，處理拖動結束判斷問題，也就是向左拖動距離大于某值時，菜單完全退出，小于某值的時候，則還是完全拉出。

這里重點是，我們向左拖動時（此時拖動距離應是負數），如果我們的臨界距離是10，則應為拖動距離小于-10時，完全退出菜單，拖動距離大于-10時，完全拉出菜單。并且，我們在完全退出菜單的同時，移除遮罩層。

重點：

拖動距離<-10 ,完全退出菜單，并且移除遮罩層。否則，完全拉出菜單。

如圖：

側滑設置完畢，收尾工作：

到上的時候，可以說我們側滑菜單全部交互已經全部設置好了，我也是邊寫邊做，已經可以使用，關于說的幾個細節需要和大家分享，

在實際中，拖動開始的觸摸點判斷我是一樣的，但是設置的時候我不是直接設置為距離，而是如果觸摸點條件下。我將全局變量設置為1，表示允許側滑，否則設置為0，表示部允許側滑。

下面的拖動條件則是判斷全局變量是否為1，這樣的好處就是，內容的動態面板切換的時候，我只需要判斷變量值是否為1而決定是否有側滑事件。只需根據應用場景不同，設置全局變量為1或0即可。

側滑設置完畢，?Tabbar問題：

回到問題，我們的側滑事件是在子頁面中解決的，框架是一個父級頁面，那么當我側滑菜單出現的時候，我不需要Tabbar顯示的時候怎么辦？

同學會發現，你根本無法設置父級框架的元件是否為可見。我們唯一能做的只有一個事

設置全局變量

思路來了，我們需要在設置全局變量的值的時候，聯動的設置Tabbar是否可見。

那么，問題來了，怎樣在父級框架中檢測全局變量改變的時候，同時設置Tabbar呢？

核心元件，核心元件，核心元件：動態面板。

如果是開發的同學這個問題比較好解決，因為在開發中是MVC設計思想，只需在視圖控制器中修改即可，但是我們這里是Axure, 所以沒有控制器這個說法。

但是動態面板有個核心交互-狀態改變時?觸發事件。

重點核心

如果我們動態面板不斷循環，那么就不斷觸發 狀態改變時?這個事件，如果在狀態改變的時候能檢測到全局變量滿足某個條件，則可間接改變父頁面中的元件狀態 。

那么我們在父級框架中，應該加入一個動態面板并且添加兩個及以上狀態，尺寸位置，內容無所謂，為空即可，為視覺效果可設置隱藏，且設置尺寸為(w:1.h:1)，取名循環判斷器，在頁面載入的時候，即設置動態面板不斷循環。

重點

父級框架 – 載入時 -設置面板狀態 – 狀態（Next）-勾選向后循環 ?– ?循環間隔（100毫秒，視情況而定）

循環器開始了，我們還需要一個全局變量默認為1可見，并且為動態面板狀態改變時添加相應事件，這里就不上圖了。

口語理解：

當面板狀態不斷改變時

每100毫秒判斷

如果全局變量是否為0且Tabbar元件為顯示狀態，則隱藏動態面板。

如果全局變量是1且Tabbar元件為隱藏狀態，則顯示動態面板。

如果都不是，則不做任何操作。

• 1—可見
• 0–不可見

重點：

為了避免Tabbar在100毫秒后頻繁改變，在第一次隱藏或者顯示動態面板后，隨即立即設置全局變量為其他值（我這里設置為 3 ）。

附上設置圖：

在這里我們的父級框架的設置算是完畢了，但是我們問題是怎樣在內聯框架中的子頁面 操作時影響父級框架，所以，此時，我們轉換到我們側滑菜單頁面，進行設置變量值。

• 文字描述： 側滑開始時（遮罩出現）就應讓父級Tabbar設置為不可見，即全局變量設置為 0 。
• 側滑結束時（遮罩消失時），父級Tabbar應設置為可見，即全局變量為 ? ? ? ? ? 1.

更高級的設置，其實應該是在遮罩移動時進行判斷設置變量值，這里主要講的是思維，所以不深入了。

附上設置圖：

這樣大家再看看，討厭的Tabbar就不見了，當然重點不是討論Tabbar放在哪里的問題，問題的重點是，怎樣在內聯框架子頁面的行為，影響父級框架中元件的狀態。實用場景應該很多的。

結語

好了，不知不覺，這個教程寫了幾個小時，也許做只要20分鐘，我不常寫教程，如果有興趣的同學對于教程寫法上有不懂或者建議的地方，請指出來，并且我也不太清楚，這種教程是否有同學看，如果太淺了我可以寫更高級一點的。

點擊觀看原型

下次準備寫Axure主體是： 怎樣讓中繼器的每一項，中的某個元件根據中繼器的文本而進行改變 。

應用場景：當你用中繼器展示文本標簽的時候，希望每一行的文本長度是根據文本內容而改變的，而不是固定的。

如圖：

講解： 整個表是一個用中繼器表示不同的欄目，長度高度都是根據文字類容調整的，而不是固定高度的。

最后，關于Axure，教程出現的數值，和操作事件真的不重要，重要的是思維理解，一步一步下一步，這樣去做。

好了，謝謝大家觀看，有點長，有點復雜，感謝每一個用心看完的同學。

本文由 @demon猿 原創發布于人人都是產品經理。未經許可，禁止轉載。