彈幕的流行

遊戲直播

彈幕的應用最早起源於日本彈幕視頻分享網站niconico動畫，後來國內的一些二次元網站，如A站、B站引進了彈幕，現在已經成為視頻網站、直播網站的標配功能了。大量吐槽評論從屏幕飄過時效果看上去像是飛行射擊遊戲裡的彈幕，所以NICO網民將這種有大量的吐槽評論出現時的效果做彈幕。今天和大家聊一聊當下流行的這個彈幕，藉助原型工具Axure如何才能實現這樣比較酷的交互效果。

觀察分析交互

進入直播頁面時（默認已開啟彈幕），第一波彈幕一排排彈幕從屏幕的右側緩緩向左移動，直至屏幕的最左側，彈幕內容消失，緊接著第二輪彈幕從屏幕右側出現，緩緩向左移動，不斷重複著第一波彈幕內容的動畫效果。

彈幕的移動是一個重複動作，我們可以利用一個空面板循環切換狀態來實現重複移動的動作。彈幕內容的移動同時也是有規律的，從屏幕的右側出現，水平方向勻速移動，消失於屏幕左側，又從屏幕右側出現，不斷週而復始。如果需要實現這樣的往復循環移動，我們至少需要準備兩組彈幕內容。這兩組內容可以分別用一個動態面板來承載，作為內容容器。

準備好必要的元件

通過上文的分析，相信大家能夠有一個比較清晰的思路，下面快速準備好相應的元件內容。準備一個佔位符，作為彈幕牆的示意，當前也可以準備一張好看的圖片。拖動一個動態面板，命名為彈幕，寬度與彈幕牆一致，高度略低於彈幕牆即可。

下面我們為彈幕準備好內容，分別在彈幕的面板中準備兩個寬度、高度相等的動態面板，分別命名為內容1和內容2。為這兩個內容面板中放置內容，每一條彈幕數據通過一個矩形來實現，矩形中分別填入不同的文字，以便區分不同的彈幕內容。這裡可以為矩形填充顏色，矩形建議設置一定的透明度，這樣在看彈幕的時，不影響觀看彈幕牆的內容。

最好我們還要準備一個不帶任何內容的動態面板，命名為指示器，並設置3個空狀態，它的作用主要用於控制彈幕內容的移動。