相信大家對(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ò)程是線(xiàn)性的析显，用時(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ò)程是線(xiàn)性的，用時(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)铜秆。
也可以隨時(shí)關(guān)注我的個(gè)人博客：http://weidublog.com淹真，因?yàn)楣ぷ鬟^(guò)程中有很多這些axure原型設(shè)計(jì)小技巧的例子，所以我會(huì)堅(jiān)持分享下去连茧，希望對(duì)大家有幫助核蘸，你們對(duì)我的關(guān)注就是我的動(dòng)力巍糯。
作者：維度
轉(zhuǎn)載請(qǐng)注明出處：http://weidublog.com/index.php/2017/03/14/98/
