在前兩講中我們講解了如何通過(guò)元件的觸發(fā)交互或者通過(guò)外部動(dòng)態(tài)面板介入來(lái)實(shí)現(xiàn)循環(huán)的效果帽蝶，那么本次教程趁熱打鐵窥突，我們講講解如何通過(guò)循環(huán)來(lái)模擬頁(yè)面的彈幕功能轧钓，先看下最終實(shí)現(xiàn)的效果粘优。

交互解析

按照一貫以來(lái)先思考后動(dòng)手的習(xí)慣恰起，我們來(lái)看下這個(gè)效果設(shè)計(jì)到哪幾方面的內(nèi)容：

模擬自己填寫(xiě)的內(nèi)容發(fā)送功能（包括按鈕的禁用與啟用等）

模擬除本人以外的其他用戶發(fā)送內(nèi)容的功能

模擬彈幕的自動(dòng)滾動(dòng)

那么我們來(lái)分析下這三個(gè)功能如何實(shí)現(xiàn)：

第一個(gè)功能：相對(duì)實(shí)現(xiàn)比較簡(jiǎn)單啊央，只需要判斷文本框中文本值長(zhǎng)度是否為空他爸，并且給與下方的橫線缩功、右側(cè)的按鈕不同的狀態(tài)即可實(shí)現(xiàn)了层扶；

第二個(gè)功能：似乎有似曾相識(shí)的感覺(jué)箫章，如果仔細(xì)看的話就能夠發(fā)現(xiàn)如果“自己”不發(fā)送內(nèi)容的情況下，一直都是相同的幾個(gè)用戶在發(fā)送相同的話镜会。沒(méi)錯(cuò)檬寂，回到我們的主題了，就是循環(huán)稚叹，實(shí)際上只需要不停的循環(huán)就可以模擬出來(lái)其他用戶發(fā)送內(nèi)容的效果了焰薄。

第三個(gè)功能：仔細(xì)想一下，axure中能夠?qū)崿F(xiàn)滾動(dòng)的就倆元件動(dòng)態(tài)面板和內(nèi)聯(lián)框架扒袖，這兩個(gè)元件的區(qū)別就在于一個(gè)在頁(yè)面中塞茅，一個(gè)在頁(yè)面外，其實(shí)都能夠?qū)崿F(xiàn)季率，這里為了方便講解野瘦，我們就是用動(dòng)態(tài)面板來(lái)實(shí)現(xiàn)！

到這里飒泻，我們就能明確功能的實(shí)現(xiàn)邏輯了：通過(guò)循環(huán)效果+動(dòng)態(tài)面板的限制高度模擬彈幕發(fā)送及滾動(dòng)鞭光，開(kāi)整！

交互制作

制作彈幕容器

首先我們需要準(zhǔn)備一個(gè)容器泞遗，這個(gè)容器用來(lái)存儲(chǔ)我們的原始的彈幕以及后續(xù)的彈幕內(nèi)容惰许，那么這里準(zhǔn)備一個(gè)矩形，大小按照個(gè)人需求調(diào)整史辙，我這邊設(shè)置的是345*100的尺寸汹买，并且由于我們的彈幕最先出現(xiàn)在最底端佩伤，靠左側(cè)，那么我們需要設(shè)置矩形的對(duì)齊樣式為居左晦毙，靠下生巡，之后在里面填入我們的原始數(shù)據(jù)就可以了。

模擬彈幕循環(huán)

那么在彈幕容器制作完成之后见妒，接下來(lái)就需要設(shè)置彈幕的自動(dòng)發(fā)送及滾動(dòng)了孤荣，先完成第一步：彈幕的自動(dòng)發(fā)送。

這里我們用到Axure神奇操作系列 - 循環(huán)（第一講）?中講到的觸發(fā)功能须揣，首先我們模擬一個(gè)用戶的發(fā)送循環(huán)操作盐股。那么在這里我們首先對(duì)元件的載入時(shí)交互添加設(shè)置文本事件，需要注意由于我們的彈幕是豎向新增返敬，所以切記一定要換行遂庄，否則新增的彈幕就會(huì)移動(dòng)到右側(cè)去。

設(shè)置文本變化事件之后劲赠，等待2000ms用于模擬用戶發(fā)彈幕的間隔（如果需要模擬很火爆的效果，可以試試縮小等待事件）

之后秸谢，觸發(fā)凛澎！，那么我們就得到了這么一個(gè)元件~F5看下估蹄，就能夠模擬實(shí)現(xiàn)彈幕的自增了塑煎。

最后，在中間多插入幾個(gè)用戶和用戶的彈幕臭蚁，設(shè)置好等待事件最铁，就可以模擬好多人在一起發(fā)彈幕的功能了~

實(shí)現(xiàn)滾動(dòng)效果

這里就很簡(jiǎn)單了，我們用到了動(dòng)態(tài)面板垮兑，在剛剛的彈幕容器上點(diǎn)擊右鍵冷尉，轉(zhuǎn)為動(dòng)態(tài)面板。這里需要注意轉(zhuǎn)為動(dòng)態(tài)面板后默認(rèn)動(dòng)態(tài)面板會(huì)隨著內(nèi)容尺寸自動(dòng)調(diào)整大小系枪，所以我們需要把這個(gè)選項(xiàng)關(guān)閉掉雀哨。完成！~

此時(shí)F5一下私爷，彈幕自增滾動(dòng)效果就出來(lái)了~

實(shí)現(xiàn)彈幕發(fā)送

實(shí)現(xiàn)彈幕發(fā)送實(shí)際上只需要兩個(gè)元件即可實(shí)現(xiàn)雾棺，即：文本框、發(fā)送按鈕衬浑，但是為了好看捌浩，我們?cè)偌右粋€(gè)邊框，當(dāng)然邊框根據(jù)好看程度可以全包圍或者半包圍工秩，我在這里采用底部邊框顯示尸饺，其他邊框隱藏进统。

那么我們捋一下我們想要的效果：

文本框獲取焦點(diǎn)時(shí)，通過(guò)選中修改邊框顏色侵佃；

文本框中文字長(zhǎng)度＞0時(shí)麻昼，啟用發(fā)送按鈕；

點(diǎn)擊發(fā)送按鈕后馋辈，將文本框中的文本清零抚芦，并且禁用自己；

文本框失去焦點(diǎn)時(shí)迈螟，通過(guò)取消選中修改邊框顏色叉抡。

最后根據(jù)三個(gè)元件對(duì)應(yīng)的效果，需要設(shè)置如下樣式：邊框的選中樣式答毫、發(fā)送按鈕的禁用樣式褥民；

那么我們就得到了以下三個(gè)元件：

最后根據(jù)我們的交互需求，對(duì)文本框設(shè)置交互洗搂，就能夠?qū)崿F(xiàn)我們上面提到的想要的效果了~

那么到這里消返，我們就完成了評(píng)論的填寫(xiě)了，最后一步就是發(fā)送耘拇。那么很明顯這個(gè)事件需要配置給發(fā)送按鈕撵颊。在這里我們實(shí)現(xiàn)的是要將文本框中的內(nèi)容發(fā)送到彈幕容器的最底部去，由于這兩個(gè)元件都是其他元件惫叛，所以我們這里用到局部變量倡勇，步驟如下：

添加全局變量：LVAR1，綁定到文本框的元件文字嘉涌；LVAR2妻熊，綁定到彈幕容器中，最后加上“自己”的用戶名仑最，就可以實(shí)現(xiàn)彈幕的發(fā)送了扔役。

那么最后發(fā)送完成，需要清空數(shù)據(jù)框词身，只需要設(shè)置文本框的文本為空就好了~

最后我們就能夠得到一個(gè)完整的彈幕發(fā)送功能了厅目。

最后，對(duì)頁(yè)面潤(rùn)色潤(rùn)色法严，加上幾個(gè)好看的圖片背景损敷，F(xiàn)5預(yù)覽看下，看下能不能實(shí)現(xiàn)我們想要的效果~

小結(jié)

通過(guò)這個(gè)教程想必大家能夠更清楚如何在axure中實(shí)現(xiàn)循環(huán)操作深啤，并且能夠根據(jù)循環(huán)的進(jìn)行和打斷實(shí)現(xiàn)各種想要的效果拗馒。希望在以后做原型的過(guò)程中，多想多做多嘗試溯街，總有一種辦法能夠?qū)崿F(xiàn)你的目標(biāo)~

最后诱桂，源文件在附件中有洋丐，回復(fù)即可下載~

下載源文件：https://www.pmyes.com/thread-35147.htm

以上~