Axure RP設計圖片翻牌、幻燈片、走馬燈的方法
以下介紹幾個常用小教程,還是那句話——內容簡單,適合菜鳥查閱,老鳥可飄過,順便幫忙點個贊哈
網頁圖片翻牌效果
例如:鼠標移到圖片上時,該圖片顯現翻牌效果,顯示另外一張圖片。鼠標移開,恢復原圖
1.拖動1個圖形元件,右鍵設置“轉換為動態面板“,雙擊動態模板,添加“State2”;
2.對State1,和State2導入圖片,圖片大小要一致;
3.添加鼠標移入交互動作,并添加動作“設置面板狀態”→“當前元件”→“Next”→{進入動畫}與{退出動畫}均為“向右翻轉”;
4.繼續添加鼠標移出交互動作,并添加動作“設置面板狀態”→“當前元件”→“Previous”→{進入動畫}與{退出動畫}均為“向右翻轉”;
5.最后把圖片動態面板,復制多幾個,一個個去修改它們的圖片。
網站常見幻燈片
例如:載入網頁,幻燈自動輪轉,點擊幻燈號數,直接跳入該號圖片
1.拖進一個動態面板元件,設置尺寸(根據自己愛好定義),我這里設置的為寬500,高200,雙擊進入面板狀態管理,設置面板名稱,面板狀態添加5個狀態;
2.針對面板內的5個狀態,每個都拖入圖片,并設置好圖片的尺寸,尺寸與動態面板一致;
3.回到index頁,添加頁面加載時交互方式→添加動作設置面板狀態→選擇動態面板→選擇狀態Next→選擇向后循環、循環間隔2000毫秒、首個狀態延時2000毫秒后切換。設置完成后,可進入頁面測試,查看幻燈圖是否已自動輪轉;
4.添加矩形元件,設置序號、尺寸、樣式,復制到每張動態狀態上;
5.設置矩形的鼠標點擊交互,添加設置面板狀態動作→選擇序號對應的圖片名稱→添加等待動作→等待時間2000毫秒→添加設置面板狀態動作→設置選擇狀態Next→選擇循環間隔2000毫秒。
網頁常見走馬燈
例如:公司通告、股市數據、購物、博彩等都可使用到
1.拖進一個動態面板元件,設置尺寸和背景色;
2.雙擊動態面板進入面板狀態管理,添加面板名稱,新建一個面板狀態;
3.進入面板狀態state1內,添加文字,文字設置為白色字體,再進入面板狀態state2內,添加文字,文字設置為白色字體;
4.設置交互動作載入時→添加動作設置面板狀態→選擇動態面板→選擇狀態Next→選擇向后循環和循環間隔30000毫秒→進入動畫從左滑動,時間30000毫秒(建議不要設置太快,否則閃瞎眼)
本文由 @jukilee 原創發布于人人都是產品經理。未經許可,禁止轉載。
為什么走馬燈開始快,之后會很慢,而且不會循環所有的文字?
為什么跑馬燈會只循環一次
建議弄個,在線演示鏈接