相信大家在日常的產(chǎn)品設(shè)計(jì)中或多或少的會(huì)涉及到繪制跑馬燈的效果，諸如彈幕效果或者滾動(dòng)公告

那么這樣的效果如何實(shí)現(xiàn)呢，直接上干貨

?

一、功能分析

需要實(shí)現(xiàn)的功能如下:

①在固定區(qū)域內(nèi)展示文字

②從左向右循環(huán)滾動(dòng)展示

實(shí)現(xiàn)的原理如下

?

假設(shè)滾動(dòng)文字的初始位置是x=200，此時(shí)應(yīng)該進(jìn)行的是將滾動(dòng)文字從當(dāng)前坐標(biāo)橫向向左線性移動(dòng)，直至正好移動(dòng)出屏幕，也就是負(fù)的文字的長(zhǎng)度，也就是x=-100；當(dāng)移動(dòng)到-100時(shí)，再重置文字移動(dòng)到初始位置x=200，此時(shí)不要加線性動(dòng)畫，然后繼續(xù)重復(fù)上述邏輯。

那么以上邏輯需要解決一個(gè)問題就是怎樣一直監(jiān)聽判斷滾動(dòng)文字的位置呢？所以可以使用動(dòng)態(tài)面板每隔一秒切換一次狀態(tài)，然后再利用動(dòng)態(tài)面板的狀態(tài)改變時(shí)作為監(jiān)聽位置變化的判斷依據(jù)，那么據(jù)此就可以開始咱們的原型繪制了

二、原型制作

1.為了好看在這里拖入一個(gè)手機(jī)殼（最好設(shè)置成在最頂層，目的是為了當(dāng)文字滾出屏幕時(shí)遮擋住文字），坐標(biāo)為x=0，y=0；然后拖入一個(gè)矩形，拖個(gè)合適位置和大小，可以設(shè)置顏色，矩形代表文字的滾動(dòng)區(qū)域和背景，并將其轉(zhuǎn)化成動(dòng)態(tài)面板，設(shè)置兩個(gè)state，轉(zhuǎn)化成動(dòng)態(tài)面板的目的是把他當(dāng)是循環(huán)觸發(fā)器，讓文字能一直循環(huán)滾動(dòng)

2.拖入一個(gè)文本標(biāo)簽，輸入一些文字，由于咱們做的效果是文字從右向左滾動(dòng)，所以將其放在手機(jī)殼的最右邊。最重要的是記錄一下當(dāng)前文字的坐標(biāo)x=240，y=160；文字長(zhǎng)度為160。

3.點(diǎn)擊空白處，給頁面加上每隔1秒切換一次動(dòng)態(tài)面板的交互效果

4.點(diǎn)擊動(dòng)態(tài)面板，設(shè)置動(dòng)態(tài)面板變化時(shí)，先寫第一個(gè)判斷，當(dāng)文字處于初始位置時(shí)進(jìn)行向左滾動(dòng)至移出屏幕

①選擇判斷值，點(diǎn)擊fx，創(chuàng)建局部變量為滾動(dòng)文字的橫坐標(biāo)x，判斷當(dāng)橫坐標(biāo)x=240時(shí)

?

將滾動(dòng)文字線性平移到正好移出屏幕，也就是上邊記錄的負(fù)的文字寬度

②復(fù)制一個(gè)判斷，判斷當(dāng)正好移出屏幕時(shí)，重置當(dāng)前的位置到初始位置

三、效果展示

運(yùn)行查看效果即可

有需要的可以下載成品：

axure繪制的跑馬燈效果-其它文檔類資源-CSDN下載

?

?

?

總結(jié)

以上是生活随笔為你收集整理的Axure绘制跑马灯的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。