Axure中繼器解析
1 中繼器
1.1 資料集
中繼器有一個自帶的資料集,如下圖:
Axure8環境下,拖入中繼器,單擊中繼器,右上角屬性一列中可以找到。
這個資料集有以下特點:
- 資料集列名必須為半形英文字母或數字的組合,並且以數字開頭。
- 可以通過操作行進行對選中條目的更改,或者直接右擊選擇操作。
這個資料集的內容引數,可以通過事件的觸發與中繼器的子檢視進行互動,極大的方便了這種資訊格式的資料的載入效果。
1.2 檢視
中繼器剛被建立時,子檢視預設為一個矩形。當我們需要更改子檢視顯示時,可以根據需要,把矩形刪掉,建立自己的佈局檢視。
1.2.1 佈局和間距
中繼器預設佈局為垂直的連結串列。我們可以在中繼器的樣式中對其佈局屬性進行修改,以達到我們想要的效果。間距可以設定兩個子檢視中間的距離。
下圖為間距和背景的實現效果:
1.2.2 背景
中繼器的子檢視背景交替要設值其樣式中的背景屬性,並將子檢視的樣式中的填充屬性改為透明(透明度為0,或依據需求自己更改),這樣才能實現要達到的效果。
上圖中由於未將子檢視的填充設定為透明,就未實現背景交替的展示。
1.2.3 分頁
分頁,設定之後,一個頁面只會顯示相應的子檢視數量,我們可以通過設定按鈕來對下一頁進行載入,詳細見樣例。
1.3 互動
一共有載入,每項載入,專案調整尺寸三個互動事件。
值得說明的是,中繼器自己已經實現了專案調整尺寸這個效果,所以有一個專案調整尺寸事件來實現互動。他對變化元件的下面的元件有推動和拉動的效果,這是中繼器很方便的一點。詳細見我初識Axure文章的Demo04中播放後的變化。
2 一個小樣例
2.1 基本實現載入分頁
使相鄰子檢視變得清晰,相對獨立。
同理可設定滑鼠移出時事件,達到滑鼠移入變色效果。
同理,可以設定其他的暱稱id,時間,內容等等。
這兒最好使用,原來的Previous(上一頁)和Next(下一頁)。
2.2 優化點選互動
2.2.1 優化後的樣子
增加的效果:
- 滑鼠移入移出變色效果,滑鼠移入移出互動事件。 滑鼠按下,變色,鬆開實現翻頁並恢復顏色。
2.2.2 優化中的問題:
在後續優化中,設定了滑鼠按下時和滑鼠鬆開時的互動。發現該互動與滑鼠單擊時會產生衝突,我們需要把滑鼠單擊時的事件移到滑鼠鬆開後之中。
上下翻頁可以設定預設值,不選擇Value,選擇Previous設定為上一頁,Next設定為下一頁。
2.3 Final:
2.3.1 結構
2.3.2 互動
3 分享
一個線上視訊轉換Gif的網站: