中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語(yǔ)：我們?cè)诳锤鞣N視頻時(shí)經(jīng)常會(huì)把彈幕功能打開(kāi)，一些有趣的彈幕互動(dòng)也會(huì)帶來(lái)好的用戶(hù)體驗(yàn)；本文作者分享了在Axure里面制作循環(huán)彈幕，我們一起來(lái)了解一下。

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

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

一、思路講解

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

1. 用多個(gè)動(dòng)態(tài)面板制作

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

但是如果僅通過(guò)動(dòng)態(tài)面板的滑動(dòng)動(dòng)畫(huà)會(huì)存在缺點(diǎn)，因?yàn)樗幕瑒?dòng)不是勻速的，在面板狀態(tài)更換時(shí)會(huì)停下來(lái)1s左右。

2. 用移動(dòng)事件制作

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

那下面我們開(kāi)始教學(xué)：

二、材料準(zhǔn)備

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

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

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

三、交互設(shè)置

1. 彈幕組合2的交互

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

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

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

2. 彈幕組合1的交互

隱藏——因?yàn)閺椖唤M合1是位于動(dòng)態(tài)面板的里，一開(kāi)是沒(méi)有彈幕，所以將他隱藏。

移動(dòng)——將彈幕組合1向右移動(dòng)到-this.width的位置，就是整個(gè)組合移出了動(dòng)態(tài)面板的左邊，這里設(shè)置動(dòng)畫(huà)時(shí)間為組合2的一半，因?yàn)槭且话刖嚯x，即10000ms，大家可以根據(jù)實(shí)際來(lái)設(shè)定移動(dòng)速度。

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

顯示——顯示當(dāng)前元件。

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

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

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

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

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

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

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

這里2的事件基本和1的一致，只是將移動(dòng)的目標(biāo)從1改成2。

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

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

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

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

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

四、后續(xù)拓展

有的同學(xué)可能會(huì)問(wèn)：這樣的彈幕都是一樣的，如果想每條彈幕都不一樣怎么操作？

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

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

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

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