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