1. 程式人生 > >Axure中繼器解析

Axure中繼器解析

1 中繼器

1.1 資料集

中繼器有一個自帶的資料集,如下圖:

中繼器資料集

Axure8環境下,拖入中繼器,單擊中繼器,右上角屬性一列中可以找到。
這個資料集有以下特點:
- 資料集列名必須為半形英文字母或數字的組合,並且以數字開頭。
- 可以通過操作行進行對選中條目的更改,或者直接右擊選擇操作。

操作

這個資料集的內容引數,可以通過事件的觸發與中繼器的子檢視進行互動,極大的方便了這種資訊格式的資料的載入效果。

1.2 檢視

中繼器剛被建立時,子檢視預設為一個矩形。當我們需要更改子檢視顯示時,可以根據需要,把矩形刪掉,建立自己的佈局檢視。

1.2.1 佈局和間距

中繼器預設佈局為垂直的連結串列。我們可以在中繼器的樣式中對其佈局屬性進行修改,以達到我們想要的效果。間距可以設定兩個子檢視中間的距離。
下圖為間距和背景的實現效果:

中繼器樣式佈局和間距效果

1.2.2 背景

中繼器的子檢視背景交替要設值其樣式中的背景屬性,並將子檢視的樣式中的填充屬性改為透明(透明度為0,或依據需求自己更改),這樣才能實現要達到的效果。
上圖中由於未將子檢視的填充設定為透明,就未實現背景交替的展示。

實現背景交替效果

1.2.3 分頁

分頁,設定之後,一個頁面只會顯示相應的子檢視數量,我們可以通過設定按鈕來對下一頁進行載入,詳細見樣例。

分頁設定

1.3 互動

一共有載入,每項載入,專案調整尺寸三個互動事件。
值得說明的是,中繼器自己已經實現了專案調整尺寸這個效果,所以有一個專案調整尺寸事件來實現互動。他對變化元件的下面的元件有推動和拉動的效果,這是中繼器很方便的一點。詳細見我初識Axure文章的Demo04中播放後的變化。

http://www.jianshu.com/p/58a00f9d3d68

2 一個小樣例

2.1 基本實現載入分頁

原料

配方

背景色交替

使相鄰子檢視變得清晰,相對獨立。

翻頁互動效果

同理可設定滑鼠移出時事件,達到滑鼠移入變色效果。

設定值

同理,可以設定其他的暱稱id,時間,內容等等。

設定頁碼

這兒最好使用,原來的Previous(上一頁)和Next(下一頁)。

2.2 優化點選互動

2.2.1 優化後的樣子

增加的效果:
- 滑鼠移入移出變色效果,滑鼠移入移出互動事件。 滑鼠按下,變色,鬆開實現翻頁並恢復顏色。

gif效果圖.gif

2.2.2 優化中的問題:

在後續優化中,設定了滑鼠按下時和滑鼠鬆開時的互動。發現該互動與滑鼠單擊時會產生衝突,我們需要把滑鼠單擊時的事件移到滑鼠鬆開後之中。
上下翻頁可以設定預設值,不選擇Value,選擇Previous設定為上一頁,Next設定為下一頁。

2.3 Final:

2.3.1 結構

結構

2.3.2 互動

上一頁按鈕

下一頁按鈕

3 分享

一個線上視訊轉換Gif的網站: