編輯導語：我們在看各種視頻時經(jīng)常會把彈幕功能打開，一些有趣的彈幕互動也會帶來好的用戶體驗；本文作者分享了在Axure里面制作循環(huán)彈幕，我們一起來了解一下。

Hello，今天教大家在Axure里面制作循環(huán)彈幕的效果。效果主要包括了彈幕的移動和自動循環(huán)。

原型預(yù)覽地址：https://o3klkb.axshare.com

一、思路講解

在制作之前，作者嘗試了幾種方式的制作方法，所以和大家一一分享一下。

1. 用多個動態(tài)面板制作

這種方法的優(yōu)勢是及其簡單，我們只需要在各個動態(tài)面板里面添加文字，然后設(shè)置自動循環(huán)的事件，讓動態(tài)面板的狀態(tài)為next循環(huán)，并且加一個向左滑動的效果。

但是如果僅通過動態(tài)面板的滑動動畫會存在缺點，因為它的滑動不是勻速的，在面板狀態(tài)更換時會停下來1s左右。

2. 用移動事件制作

如果用移動事件來制作的話就可以避免上述的問題，但是做起來會比動態(tài)面板制作的復雜，思路是通過設(shè)置兩個彈幕組，通過設(shè)置動態(tài)面板尺寸，只顯示一個彈幕組的位置，然后彈幕組同時移動，當?shù)谝粋€彈幕組移出動態(tài)面板左邊的位置時，將他瞬間移動到最右邊繼續(xù)移動，兩個彈幕組不斷循環(huán)。

那下面我們開始教學：

二、材料準備

動態(tài)面板*1——調(diào)整動態(tài)面板適當大小，并且取消勾選自動調(diào)整為內(nèi)容尺寸。

文本標簽*N——新建多個文本標簽，填寫彈幕文字，調(diào)整顏色、大小、位置；將其分成兩個彈幕組合1和2，第一個組合放置在動態(tài)面板內(nèi)部，第二個組合放置在動態(tài)面板右邊。因為一開是沒有彈幕，所以彈幕組合1一開始是隱藏的。

文本標簽*2——這里用兩個標簽作為觸發(fā)事件，后續(xù)會詳細介紹，默認隱藏。

三、交互設(shè)置

1. 彈幕組合2的交互

移動——將彈幕組合2向右移動到-this.width的位置，就是整個組合移出了動態(tài)面板的左邊，這里設(shè)置動畫時間為20000ms，大家可以根據(jù)實際來設(shè)定移動速度。

等待——和上面滑動時間一致，等他滑動完在繼續(xù)做下面的交互，所以等待20000ms。

觸發(fā)——觸發(fā)循環(huán)事件2鼠標單擊時，用于不斷循環(huán)，后面講到循環(huán)事件的交互時會細說。

2. 彈幕組合1的交互

隱藏——因為彈幕組合1是位于動態(tài)面板的里，一開是沒有彈幕，所以將他隱藏。

移動——將彈幕組合1向右移動到-this.width的位置，就是整個組合移出了動態(tài)面板的左邊，這里設(shè)置動畫時間為組合2的一半，因為是一半距離，即10000ms，大家可以根據(jù)實際來設(shè)定移動速度。

等待——和上面滑動時間一致，等他滑動完在繼續(xù)做下面的交互。

顯示——顯示當前元件。

觸發(fā)——觸發(fā)循環(huán)事件1鼠標單擊時，用于不斷循環(huán)，后面講到循環(huán)事件的交互時會細說。

3. 循環(huán)事件1的交互

移動——將彈幕組合1移動到動態(tài)面板的右面邊緣的位置，LVAR1.width就是動態(tài)面板的寬度，這里注意我們是瞬間移動的，所以不需要加時間。

移動——瞬間移動完之后，我們繼續(xù)將彈幕組合1向右移動到-target.width的位置，并且設(shè)置動畫時間為20000ms；這里和上面載入時的時間說明一下，因為載入的時候，他就在面板里面，所以移動的時間是一半，移動完成之后，我們把它移到動態(tài)面板右邊邊緣的位置，所以是兩倍距離，所以時間也是兩倍。

等待——和上面滑動時間一致，等他滑動完在繼續(xù)做下面的交互，所以等待20000ms。

觸發(fā)——觸發(fā)當前循環(huán)事件1鼠標單擊時，這樣就可以實現(xiàn)不斷循環(huán)了。

4. 循環(huán)事件2的交互

這里2的事件基本和1的一致，只是將移動的目標從1改成2。

移動——將彈幕組合2移動到動態(tài)面板的右面邊緣的位置，LVAR1.width就是動態(tài)面板的寬度，這里注意我們是瞬間移動的，所以不需要加時間。

移動——瞬間移動完之后，我們繼續(xù)將彈幕組合2向右移動到-target.width的位置，并且設(shè)置動畫時間為20000ms。

等待——和上面滑動時間一致，等他滑動完在繼續(xù)做下面的交互，所以等待20000ms。

觸發(fā)——觸發(fā)當前循環(huán)事件2鼠標單擊時，這樣就可以實現(xiàn)不斷循環(huán)了。

那這樣一個高保真的循環(huán)彈幕就制作完成了。

四、后續(xù)拓展

有的同學可能會問：這樣的彈幕都是一樣的，如果想每條彈幕都不一樣怎么操作？

其實這也不難，我們可以新建一個中繼器，然后比如一個組合有10個標簽，我們就設(shè)定10列，將中中繼器每列的值設(shè)置到對應(yīng)的文本標簽內(nèi)，中繼器分多頁顯示，每頁值顯示1行。在觸發(fā)事件的時候，設(shè)置中繼器翻到下一頁，那么新的文本就會補充上。有興趣的同學可以自己試試哈。

那以上就是本期全部內(nèi)容了，感謝您的閱讀，我們下期見，88~~~

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

題圖來自Unsplash，基于CC0協(xié)議。