Axure RP8 教程:照片膠片放映滾動效果制作(一)
如何利用Axure RP8 實現照片膠片放映滾動效果呢?一起來文中看看~
生活中,經??吹侥z片放映滾動播放的效果,如下所示:
原理分析:
- 圖片集循環水平滾動展示。
- 當【圖片集】向左水平移動時,最后一張圖片顯示到達最右端時,第一張圖片移到后面,繼續接著輪放。循環水平移動播放。
本教程將分享實現方法:
第一種:利用動態面板切換
適用情形:展示的圖片集總寬度正好等于展示屏幕寬度。
1)界面元件搭建
拉入三個矩形,填充不同顏色,作為要展示的三個圖片,再將其轉為動態面板。接下來,需要復制狀態state1,生成一個相同的狀態面板state2。
2)交互實現
選中此動態面板,添加【載入時】,選擇當前元件,選擇狀態為:next,勾選向后循環,循環間隔為:0秒,進入動畫為:向左滑動,時間為:12000毫秒。
具體設置如下圖所示:
(切記:動態面板的進入進出動畫要選擇向左滑動)
預覽效果如下:
作者:火星人~艾斯,公眾號:艾斯的Axure峽谷
本文由 @火星人~艾斯 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
評論
鼠標移入時,如何立即停下滑動