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

1 評(píng)論 3603 瀏覽 4 收藏 3 分鐘

如何利用Axure RP8 實(shí)現(xiàn)照片膠片放映滾動(dòng)效果呢?一起來(lái)文中看看~

生活中,經(jīng)??吹侥z片放映滾動(dòng)播放的效果,如下所示:

原理分析:

  1. 圖片集循環(huán)水平滾動(dòng)展示。
  2. 當(dāng)【圖片集】向左水平移動(dòng)時(shí),最后一張圖片顯示到達(dá)最右端時(shí),第一張圖片移到后面,繼續(xù)接著輪放。循環(huán)水平移動(dòng)播放。

本教程將分享實(shí)現(xiàn)方法:

第一種:利用動(dòng)態(tài)面板切換

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

1)界面元件搭建

拉入三個(gè)矩形,填充不同顏色,作為要展示的三個(gè)圖片,再將其轉(zhuǎn)為動(dòng)態(tài)面板。接下來(lái),需要復(fù)制狀態(tài)state1,生成一個(gè)相同的狀態(tài)面板state2。

2)交互實(shí)現(xiàn)

選中此動(dòng)態(tài)面板,添加【載入時(shí)】,選擇當(dāng)前元件,選擇狀態(tài)為:next,勾選向后循環(huán),循環(huán)間隔為:0秒,進(jìn)入動(dòng)畫(huà)為:向左滑動(dòng),時(shí)間為:12000毫秒。

具體設(shè)置如下圖所示:

(切記:動(dòng)態(tài)面板的進(jìn)入進(jìn)出動(dòng)畫(huà)要選擇向左滑動(dòng))

預(yù)覽效果如下:

 

作者:火星人~艾斯,公眾號(hào):艾斯的Axure峽谷

本文由 @火星人~艾斯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 鼠標(biāo)移入時(shí),如何立即停下滑動(dòng)

    來(lái)自山東 回復(fù)