日常學(xué)習(xí)之——跑馬燈的效果~希望內(nèi)容能對(duì)大家有幫助。

效果如下圖 o(*￣▽￣*)o

思路：

1. 文字元件移動(dòng)+動(dòng)畫效果，實(shí)現(xiàn)滾動(dòng)的效果；
2. 利用動(dòng)態(tài)面板控制跑馬燈文字在規(guī)定區(qū)域內(nèi)滾動(dòng)；
3. 設(shè)置文字的初始位置、?移動(dòng)的終點(diǎn)位置，合適的動(dòng)畫時(shí)間（即文字滾動(dòng)速度）；
4. 最后一個(gè)字從視野里消失后，文字從右側(cè)重新滾動(dòng)，將文字元件移動(dòng)到控制面板的右側(cè)；
5. 通過(guò)動(dòng)態(tài)面板的顯示與隱藏，觸發(fā)循環(huán)機(jī)制。

動(dòng)態(tài)面板是個(gè)好東西~下面介紹axure通過(guò)動(dòng)態(tài)面板實(shí)現(xiàn)跑馬燈~

一 、拖一個(gè)控制面板到畫布，設(shè)置合適的大小，作為跑馬燈文字滾動(dòng)的區(qū)域

雙擊控制面板，打開一個(gè)面板狀態(tài)頁(yè)，增加一個(gè)文字元件，輸入內(nèi)容，內(nèi)容要長(zhǎng)長(zhǎng)長(zhǎng)。

如下圖：

動(dòng)態(tài)面板的作用是限制跑馬燈文字在規(guī)定區(qū)域內(nèi)滾動(dòng)，面板中的元件文字移動(dòng)的范圍超出面板時(shí)，也不會(huì)顯示在畫布當(dāng)中。

我想要的效果是，初始狀態(tài)的時(shí)候文字就在視野中，所以文字放在與面板左側(cè)對(duì)齊的位置。如果想要從視野外滾動(dòng)到視野內(nèi)，可以將文字元件拖放到面板右側(cè)。

如下圖：

二、設(shè)置文字移動(dòng)的交互事件

選擇面板的“載入時(shí)”事件，添加用例的觸發(fā)動(dòng)作，如下圖：

等待1000毫秒。這個(gè)不重要，只是用來(lái)控制頁(yè)面加載完，過(guò)1秒才滾動(dòng)文字。

移動(dòng)文字到（x，y）。

1. 參考坐標(biāo)系選擇絕對(duì)位置。
2. 文字元件的x值：文字元件是以動(dòng)態(tài)面板的坐標(biāo)系進(jìn)行移動(dòng)的，動(dòng)態(tài)面板的起點(diǎn)是（0，0），文字完全從面板面板中移出，即向左位移文字元件的長(zhǎng)度等于文字元件的寬度，x=0-文字元件.width，即x=0-Target.width；
3. 文字元件的y值：水平向左平移，y的值一直不變，是原始y的值，即文字頂部到邊緣的距離，y=Target.top；
4. 動(dòng)畫選擇線性：時(shí)間設(shè)置為 10000ms。線性是為了使文字元件勻速滾動(dòng)，10000ms是調(diào)試一個(gè)合適的滾動(dòng)的速度，與視線掃描滾動(dòng)文字的速度差不多即可。
5. 添加邊界：設(shè)置右側(cè)<0。即設(shè)置文字元件向左平移，元件右側(cè)需要離開面板，即文字元件最后一個(gè)字離開視野范圍。

等待10000毫秒。這個(gè)時(shí)間與2）中設(shè)置的動(dòng)畫時(shí)間一樣，即文字滾動(dòng)結(jié)束，離開視野。設(shè)置等待時(shí)間，是為了文字移動(dòng)完全結(jié)束，不被接下來(lái)的步驟影響。因?yàn)閍xure事件執(zhí)行是從上到下順序執(zhí)行，所以等待時(shí)間一定在【5】事件之前，否則移動(dòng)未結(jié)束，動(dòng)態(tài)面板先被隱藏了。

移動(dòng)文字到（x，y）。這個(gè)步驟的移動(dòng)，是將文字移動(dòng)到面板右側(cè)的位置，是文字一周滾動(dòng)結(jié)束的復(fù)位，接下來(lái)文字將重新從右側(cè)進(jìn)入視野。

隱藏動(dòng)態(tài)面板。通過(guò)動(dòng)態(tài)面板的隱藏和顯示，觸發(fā)文字移動(dòng)事件的循環(huán)。這個(gè)還要具體看動(dòng)態(tài)面板隱藏和顯示事件設(shè)置的用例，通過(guò)用例，詳細(xì)說(shuō)明如何觸發(fā)循環(huán)機(jī)制。

以上設(shè)置完成，進(jìn)行預(yù)覽，文字可以滾動(dòng)成功，但是你會(huì)發(fā)現(xiàn)，文字從視野內(nèi)消失后，一去不復(fù)返了。

需要進(jìn)行一些其他設(shè)置，使文字能夠循環(huán)滾動(dòng)，在面板的顯示和隱藏事件中增加用例。

如下圖：

“顯示時(shí)”事件添加的動(dòng)作和“載入時(shí)”事件一樣，除了動(dòng)畫時(shí)間以及等待的時(shí)間加長(zhǎng)了。這是因?yàn)槲淖謴?fù)位后的位置（面板右側(cè)），比初始位置（與面板左側(cè)對(duì)齊），多了一個(gè)面板的寬度。

從起始位置到文字消失的終點(diǎn)位置，位移距離增大，所以時(shí)間需要加長(zhǎng)，使?jié)L動(dòng)速度保持和初始滾動(dòng)差不多。如果時(shí)間保持不變，移動(dòng)速度會(huì)加快。

如下圖：

灰色指代面板，模擬文字的3個(gè)位置狀態(tài)，分別是：

1. 初始位置；
2. 文字移動(dòng)到視野外，停止移動(dòng)；
3. 文字復(fù)位，移動(dòng)到面板右側(cè)。

• “載入時(shí)”最后一個(gè)動(dòng)作是，將動(dòng)態(tài)面板隱藏。
• “隱藏時(shí)”只做了一件事——把面板設(shè)置為顯示。
• “顯示時(shí)”做了什么操作：文字元件移動(dòng)——復(fù)位——面板隱藏。

從動(dòng)態(tài)面板設(shè)置的這3個(gè)事件，可以看出文字循環(huán)滾動(dòng)的流程：

動(dòng)態(tài)面板載入–>勻速移動(dòng)文字（文字離開視野）–>文字快速?gòu)?fù)位（文字移動(dòng)到面板右側(cè)）–>隱藏面板（隱藏面板執(zhí)行了顯示面板，所以實(shí)際是觸發(fā)顯示面板的動(dòng)作）–>顯示面板–>移動(dòng)文字（從步驟2開始循環(huán)）….

總結(jié)

• 動(dòng)態(tài)面板中拖放一個(gè)文字元件，對(duì)文字元件進(jìn)行移動(dòng)操作，而不是對(duì)面板進(jìn)行移動(dòng)；
• 設(shè)置文字元件移動(dòng)的終點(diǎn)位置，即文字元件右側(cè)離開動(dòng)態(tài)面板視野，與動(dòng)態(tài)面板左側(cè)相切；
• 移動(dòng)到動(dòng)態(tài)面板右側(cè)，即文字元件復(fù)位，準(zhǔn)備進(jìn)行新一輪的移動(dòng)；
• 通過(guò)動(dòng)態(tài)面板的顯示、隱藏，觸發(fā)移動(dòng)的循環(huán)過(guò)程。

以上，就是跑馬燈的實(shí)現(xiàn)過(guò)程~

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

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