相信大家對(duì)看視頻時(shí)候的彈幕都不陌生，很多時(shí)候甚至?xí)X(jué)得彈幕比視頻本身還有趣，因此，現(xiàn)在大多數(shù)視頻網(wǎng)站或者視頻app都有這個(gè)彈幕功能。既然這個(gè)功能這么重要，那么在axure原型設(shè)計(jì)中又是怎么實(shí)現(xiàn)的呢？這篇文章就是教大家如何設(shè)計(jì)逼真的彈幕原型圖~~

第一步：放置相關(guān)控件

首先，擺好背景圖，其實(shí)就是一個(gè)手機(jī)外形圖和一張視頻截圖，《三生三世》最近這么火，那這里就截一張冪姐的照片當(dāng)背景圖的。

然后，拖拉一個(gè)動(dòng)態(tài)面板至視頻截圖的上方，并命名為“彈幕”。

最后，在“彈幕”動(dòng)態(tài)面板的State1面板狀態(tài)中分兩行放置若干個(gè)文本標(biāo)簽，文本標(biāo)簽的字隨意，反正大家敲彈幕的時(shí)候也挺隨意的，文本標(biāo)簽的字體顏色為白色和橙色隨機(jī)混雜。這里需要強(qiáng)調(diào)的是，所有的文本標(biāo)簽的總體長(zhǎng)度應(yīng)該是動(dòng)態(tài)面板長(zhǎng)度的兩倍，其中前面一半組合成整體，并命名為“彈幕文字1”，后面一半組合成整體，并命名為“彈幕文字2”。

第二步：設(shè)置“彈幕”動(dòng)態(tài)面板的載入時(shí)用例

首先，設(shè)置變量值OnLoadVariable為0；然后，設(shè)置顯示“彈幕”動(dòng)態(tài)面板。

第三步：設(shè)置“彈幕”動(dòng)態(tài)面板的顯示時(shí)用例

首先，添加一個(gè)顯示時(shí)用例，條件設(shè)置為OnLoadVariable等于0，為該用例添加如下6步動(dòng)作：

1. “彈幕文字1”和“彈幕文字2”都在x軸方向向左相對(duì)移動(dòng)“彈幕”動(dòng)態(tài)面板寬度的距離，移動(dòng)過(guò)程是線性的，用時(shí)10000毫秒；
2. 等待0毫秒（一定不能缺了這步，要不然循環(huán)不起來(lái)）；
3. 隱藏“彈幕”動(dòng)態(tài)面板；
4. “彈幕文字1”在x軸方向向右相對(duì)移動(dòng)2個(gè)“彈幕”動(dòng)態(tài)面板寬度的距離；
5. 設(shè)置變量值OnLoadVariable為1；
6. 顯示“彈幕”動(dòng)態(tài)面板；

然后，再添加一個(gè)顯示時(shí)用例，條件設(shè)置為OnLoadVariable等于1，為該用例添加如下6步動(dòng)作：

1. “彈幕文字1”和“彈幕文字2”都在x軸方向向左相對(duì)移動(dòng)“彈幕”動(dòng)態(tài)面板寬度的距離，移動(dòng)過(guò)程是線性的，用時(shí)10000毫秒；
2. 等待0毫秒（一定不能缺了這步，要不然循環(huán)不起來(lái)）；
3. 隱藏“彈幕”動(dòng)態(tài)面板；
4. “彈幕文字2”在x軸方向向右相對(duì)移動(dòng)2個(gè)“彈幕”動(dòng)態(tài)面板寬度的距離；
5. 設(shè)置變量值OnLoadVariable為0；
6. 顯示“彈幕”動(dòng)態(tài)面板；

搞定，點(diǎn)擊預(yù)覽就可以看到彈幕不斷地循環(huán)地飄過(guò)。

其實(shí)一開(kāi)始我是打算用動(dòng)態(tài)面板像輪播圖那樣實(shí)現(xiàn)的，但后來(lái)發(fā)現(xiàn)效果非常不理想，因?yàn)檩啿D在進(jìn)入和退出的過(guò)程都有一個(gè)緩沖的過(guò)程，以導(dǎo)致循環(huán)不順暢，所以后來(lái)使用了如上方法來(lái)實(shí)現(xiàn)。

堅(jiān)持分享axure原型設(shè)計(jì)小技巧，希望對(duì)大家有幫助。

效果圖：http://2x2mmk.axshare.com

作者：維度，個(gè)人博客：http://weidublog.com

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