Axure RP8 教程:照片膠片放映滾動(dòng)效果制作(一)
如何利用Axure RP8 實(shí)現(xiàn)照片膠片放映滾動(dòng)效果呢?一起來(lái)文中看看~
生活中,經(jīng)??吹侥z片放映滾動(dòng)播放的效果,如下所示:
原理分析:
- 圖片集循環(huán)水平滾動(dòng)展示。
- 當(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é)議
評(píng)論
鼠標(biāo)移入時(shí),如何立即停下滑動(dòng)