Axure RP設計圖片翻牌、幻燈片、走馬燈的方法

3 評論 32832 瀏覽 111 收藏 6 分鐘

以下介紹幾個常用小教程,還是那句話——內容簡單,適合菜鳥查閱,老鳥可飄過,順便幫忙點個贊哈

網頁圖片翻牌效果

例如:鼠標移到圖片上時,該圖片顯現翻牌效果,顯示另外一張圖片。鼠標移開,恢復原圖

1.1

1.拖動1個圖形元件,右鍵設置“轉換為動態面板“,雙擊動態模板,添加“State2”;

2.對State1,和State2導入圖片,圖片大小要一致;

3.添加鼠標移入交互動作,并添加動作“設置面板狀態”→“當前元件”→“Next”→{進入動畫}與{退出動畫}均為“向右翻轉”;

4.繼續添加鼠標移出交互動作,并添加動作“設置面板狀態”→“當前元件”→“Previous”→{進入動畫}與{退出動畫}均為“向右翻轉”;

5.最后把圖片動態面板,復制多幾個,一個個去修改它們的圖片。

1

2

網站常見幻燈片

例如:載入網頁,幻燈自動輪轉,點擊幻燈號數,直接跳入該號圖片

1

1.拖進一個動態面板元件,設置尺寸(根據自己愛好定義),我這里設置的為寬500,高200,雙擊進入面板狀態管理,設置面板名稱,面板狀態添加5個狀態;

2.針對面板內的5個狀態,每個都拖入圖片,并設置好圖片的尺寸,尺寸與動態面板一致;

3.回到index頁,添加頁面加載時交互方式→添加動作設置面板狀態→選擇動態面板→選擇狀態Next→選擇向后循環、循環間隔2000毫秒、首個狀態延時2000毫秒后切換。設置完成后,可進入頁面測試,查看幻燈圖是否已自動輪轉;

4.添加矩形元件,設置序號、尺寸、樣式,復制到每張動態狀態上;

5.設置矩形的鼠標點擊交互,添加設置面板狀態動作→選擇序號對應的圖片名稱→添加等待動作→等待時間2000毫秒→添加設置面板狀態動作→設置選擇狀態Next→選擇循環間隔2000毫秒。

1

2

3

4

網頁常見走馬燈

例如:公司通告、股市數據、購物、博彩等都可使用到

2

1.拖進一個動態面板元件,設置尺寸和背景色;

2.雙擊動態面板進入面板狀態管理,添加面板名稱,新建一個面板狀態;

3.進入面板狀態state1內,添加文字,文字設置為白色字體,再進入面板狀態state2內,添加文字,文字設置為白色字體;

4.設置交互動作載入時→添加動作設置面板狀態→選擇動態面板→選擇狀態Next→選擇向后循環和循環間隔30000毫秒→進入動畫從左滑動,時間30000毫秒(建議不要設置太快,否則閃瞎眼)

6.1

7

8

9

 

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 為什么走馬燈開始快,之后會很慢,而且不會循環所有的文字?

    來自山東 回復
  2. 為什么跑馬燈會只循環一次

    來自上海 回復
  3. 建議弄個,在線演示鏈接

    來自廣東 回復