相信大家在日常的產品設計中或多或少的會涉及到繪制跑馬燈的效果，諸如彈幕效果或者滾動公告

那么這樣的效果如何實現呢，直接上干貨

?

一、功能分析

需要實現的功能如下:

①在固定區域內展示文字

②從左向右循環滾動展示

實現的原理如下

?

假設滾動文字的初始位置是x=200，此時應該進行的是將滾動文字從當前坐標橫向向左線性移動，直至正好移動出屏幕，也就是負的文字的長度，也就是x=-100；當移動到-100時，再重置文字移動到初始位置x=200，此時不要加線性動畫，然后繼續重復上述邏輯。

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

二、原型制作

1.為了好看在這里拖入一個手機殼（最好設置成在最頂層，目的是為了當文字滾出屏幕時遮擋住文字），坐標為x=0，y=0；然后拖入一個矩形，拖個合適位置和大小，可以設置顏色，矩形代表文字的滾動區域和背景，并將其轉化成動態面板，設置兩個state，轉化成動態面板的目的是把他當是循環觸發器，讓文字能一直循環滾動

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

3.點擊空白處，給頁面加上每隔1秒切換一次動態面板的交互效果

4.點擊動態面板，設置動態面板變化時，先寫第一個判斷，當文字處于初始位置時進行向左滾動至移出屏幕

①選擇判斷值，點擊fx，創建局部變量為滾動文字的橫坐標x，判斷當橫坐標x=240時

?

將滾動文字線性平移到正好移出屏幕，也就是上邊記錄的負的文字寬度

②復制一個判斷，判斷當正好移出屏幕時，重置當前的位置到初始位置

三、效果展示

運行查看效果即可

有需要的可以下載成品：

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

?

?

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。