Axure RP8 教程:照片膠片放映滾動效果制作(一)

1 評論 3483 瀏覽 4 收藏 3 分鐘

如何利用Axure RP8 實現照片膠片放映滾動效果呢?一起來文中看看~

生活中,經??吹侥z片放映滾動播放的效果,如下所示:

原理分析:

  1. 圖片集循環水平滾動展示。
  2. 當【圖片集】向左水平移動時,最后一張圖片顯示到達最右端時,第一張圖片移到后面,繼續接著輪放。循環水平移動播放。

本教程將分享實現方法:

第一種:利用動態面板切換

適用情形:展示的圖片集總寬度正好等于展示屏幕寬度。

1)界面元件搭建

拉入三個矩形,填充不同顏色,作為要展示的三個圖片,再將其轉為動態面板。接下來,需要復制狀態state1,生成一個相同的狀態面板state2。

2)交互實現

選中此動態面板,添加【載入時】,選擇當前元件,選擇狀態為:next,勾選向后循環,循環間隔為:0秒,進入動畫為:向左滑動,時間為:12000毫秒。

具體設置如下圖所示:

(切記:動態面板的進入進出動畫要選擇向左滑動)

預覽效果如下:

 

作者:火星人~艾斯,公眾號:艾斯的Axure峽谷

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

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 鼠標移入時,如何立即停下滑動

    來自山東 回復