Axure：文字跑馬燈效果
日常學習之——跑馬燈的效果~希望內容能對大家有幫助。
效果如下圖 o(*￣▽￣*)o
思路：
- 文字元件移動+動畫效果，實現滾動的效果；
- 利用動態面板控制跑馬燈文字在規定區域內滾動；
- 設定文字的初始位置、 移動的終點位置，合適的動畫時間（即文字滾動速度）；
- 最後一個字從視野裡消失後，文字從右側重新滾動，將文字元件移動到控制面板的右側；
- 通過動態面板的顯示與隱藏，觸發迴圈機制。
動態面板是個好東西~下面介紹axure通過動態面板實現跑馬燈~
一 、拖一個控制面板到畫布，設定合適的大小，作為跑馬燈文字滾動的區域
雙擊控制面板，開啟一個面板狀態頁，增加一個文字元件，輸入內容，內容要長長長。
如下圖：
動態面板的作用是限制跑馬燈文字在規定區域內滾動，面板中的元件文字移動的範圍超出面板時，也不會顯示在畫布當中。
我想要的效果是，初始狀態的時候文字就在視野中，所以文字放在與面板左側對齊的位置。如果想要從視野外滾動到視野內，可以將文字元件拖放到面板右側。
如下圖：
二、設定文字移動的互動事件
選擇面板的“載入時”事件，新增用例的觸發動作，如下圖：
等待1000毫秒。這個不重要，只是用來控制頁面載入完，過1秒才滾動文字。
移動文字到（x，y）。
- 參考座標系選擇絕對位置。
- 文字元件的x值：文字元件是以動態面板的座標系進行移動的，動態面板的起點是（0，0），文字完全從面板面板中移出，即向左位移文字元件的長度等於文字元件的寬度，x=0-文字元件.width，即x=0-Target.width；
- 文字元件的y值：水平向左平移，y的值一直不變，是原始y的值，即文字頂部到邊緣的距離，y=Target.top；
- 動畫選擇線性：時間設定為 10000ms。線性是為了使文字元件勻速滾動，10000ms是除錯一個合適的滾動的速度，與視線掃描滾動文字的速度差不多即可。
- 新增邊界：設定右側<0。即設定文字元件向左平移，元件右側需要離開面板，即文字元件最後一個字離開視野範圍。
等待10000毫秒。這個時間與2）中設定的動畫時間一樣，即文字滾動結束，離開視野。設定等待時間，是為了文字移動完全結束，不被接下來的步驟影響。因為axure事件執行是從上到下順序執行，所以等待時間一定在【5】事件之前，否則移動未結束，動態面板先被隱藏了。
移動文字到（x，y）。這個步驟的移動，是將文字移動到面板右側的位置，是文字一週滾動結束的復位，接下來文字將重新從右側進入視野。
隱藏動態面板。通過動態面板的隱藏和顯示，觸發文字移動事件的迴圈。這個還要具體看動態面板隱藏和顯示事件設定的用例，通過用例，詳細說明如何觸發迴圈機制。
以上設定完成，進行預覽，文字可以滾動成功，但是你會發現，文字從視野內消失後，一去不復返了。
需要進行一些其他設定，使文字能夠迴圈滾動，在面板的顯示和隱藏事件中增加用例。
如下圖：
“顯示時”事件新增的動作和“載入時”事件一樣，除了動畫時間以及等待的時間加長了。這是因為文字復位後的位置（面板右側），比初始位置（與面板左側對齊），多了一個面板的寬度。
從起始位置到文字消失的終點位置，位移距離增大，所以時間需要加長，使滾動速度保持和初始滾動差不多。如果時間保持不變，移動速度會加快。
如下圖：
灰色指代面板，模擬文字的3個位置狀態，分別是：
- 初始位置；
- 文字移動到視野外，停止移動；
- 文字復位，移動到面板右側。
- “載入時”最後一個動作是，將動態面板隱藏。
- “隱藏時”只做了一件事——把面板設定為顯示。
- “顯示時”做了什麼操作：文字元件移動——復位——面板隱藏。
從動態面板設定的這3個事件，可以看出文字迴圈滾動的流程：
動態面板載入–>勻速移動文字（文字離開視野）–>文字快速復位（文字移動到面板右側）–>隱藏面板（隱藏面板執行了顯示面板，所以實際是觸發顯示面板的動作）–>顯示面板–>移動文字（從步驟2開始迴圈）….
總結
- 動態面板中拖放一個文字元件，對文字元件進行移動操作，而不是對面板進行移動；
- 設定文字元件移動的終點位置，即文字元件右側離開動態面板視野，與動態面板左側相切；
- 移動到動態面板右側，即文字元件復位，準備進行新一輪的移動；
- 通過動態面板的顯示、隱藏，觸發移動的迴圈過程。
以上，就是跑馬燈的實現過程~
本文由 @First_Step 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議