中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

日常學習之——跑馬燈的效果~希望內容能對大家有幫助。

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

思路：

1. 文字元件移動+動畫效果，實現滾動的效果；
2. 利用動態面板控制跑馬燈文字在規定區域內滾動；
3. 設置文字的初始位置、?移動的終點位置，合適的動畫時間（即文字滾動速度）；
4. 最后一個字從視野里消失后，文字從右側重新滾動，將文字元件移動到控制面板的右側；
5. 通過動態面板的顯示與隱藏，觸發循環機制。

動態面板是個好東西~下面介紹axure通過動態面板實現跑馬燈~

一 、拖一個控制面板到畫布，設置合適的大小，作為跑馬燈文字滾動的區域

雙擊控制面板，打開一個面板狀態頁，增加一個文字元件，輸入內容，內容要長長長。

如下圖：

動態面板的作用是限制跑馬燈文字在規定區域內滾動，面板中的元件文字移動的范圍超出面板時，也不會顯示在畫布當中。

我想要的效果是，初始狀態的時候文字就在視野中，所以文字放在與面板左側對齊的位置。如果想要從視野外滾動到視野內，可以將文字元件拖放到面板右側。

如下圖：

二、設置文字移動的交互事件

選擇面板的“載入時”事件，添加用例的觸發動作，如下圖：

等待1000毫秒。這個不重要，只是用來控制頁面加載完，過1秒才滾動文字。

移動文字到（x，y）。

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

等待10000毫秒。這個時間與2）中設置的動畫時間一樣，即文字滾動結束，離開視野。設置等待時間，是為了文字移動完全結束，不被接下來的步驟影響。因為axure事件執行是從上到下順序執行，所以等待時間一定在【5】事件之前，否則移動未結束，動態面板先被隱藏了。

移動文字到（x，y）。這個步驟的移動，是將文字移動到面板右側的位置，是文字一周滾動結束的復位，接下來文字將重新從右側進入視野。

隱藏動態面板。通過動態面板的隱藏和顯示，觸發文字移動事件的循環。這個還要具體看動態面板隱藏和顯示事件設置的用例，通過用例，詳細說明如何觸發循環機制。

以上設置完成，進行預覽，文字可以滾動成功，但是你會發現，文字從視野內消失后，一去不復返了。

需要進行一些其他設置，使文字能夠循環滾動，在面板的顯示和隱藏事件中增加用例。

如下圖：

“顯示時”事件添加的動作和“載入時”事件一樣，除了動畫時間以及等待的時間加長了。這是因為文字復位后的位置（面板右側），比初始位置（與面板左側對齊），多了一個面板的寬度。

從起始位置到文字消失的終點位置，位移距離增大，所以時間需要加長，使滾動速度保持和初始滾動差不多。如果時間保持不變，移動速度會加快。

如下圖：

灰色指代面板，模擬文字的3個位置狀態，分別是：

1. 初始位置；
2. 文字移動到視野外，停止移動；
3. 文字復位，移動到面板右側。

• “載入時”最后一個動作是，將動態面板隱藏。
• “隱藏時”只做了一件事——把面板設置為顯示。
• “顯示時”做了什么操作：文字元件移動——復位——面板隱藏。

從動態面板設置的這3個事件，可以看出文字循環滾動的流程：

動態面板載入–>勻速移動文字（文字離開視野）–>文字快速復位（文字移動到面板右側）–>隱藏面板（隱藏面板執行了顯示面板，所以實際是觸發顯示面板的動作）–>顯示面板–>移動文字（從步驟2開始循環）….

總結

• 動態面板中拖放一個文字元件，對文字元件進行移動操作，而不是對面板進行移動；
• 設置文字元件移動的終點位置，即文字元件右側離開動態面板視野，與動態面板左側相切；
• 移動到動態面板右側，即文字元件復位，準備進行新一輪的移動；
• 通過動態面板的顯示、隱藏，觸發移動的循環過程。

以上，就是跑馬燈的實現過程~

本文由 @First_Step 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議