在AxureRP8中實現廣告文字滾動效果


本文是實現動態文字在一個區域中滾動的效果,大概實現過程如下:

先准備一個區域,然后讓文字在該區域內水平移動,本文是實現了從右到左的輪詢的效果,其他雷同。

在Axure中,這種移動的過程需要動態移動,利用動態面板的狀態切換來改變文本標簽的值,從而實現了定時的功能

最后需要再頁面加載的時候動態的觸發動態面板的狀態切換以及觸發狀態改變事件。貌似也可以不要觸發狀態改變事件。

 

具體流程如下:      

1、打開Axure RP8軟件后,系統自動創建了index頁面,如圖一所示:

                        圖一 index頁面

2、在內容區域內拖入一個矩形3,在拖入一個文本標簽(將名稱設置為:滾動文字),如圖二所示:

                  圖二 設置區域及文字信息

3、將文本標簽轉換為動態面板,操作為:選擇“文本標簽”,然后鼠標右鍵,選擇“轉換為動態面板”,然后將動態面板命名為“滾動文字動態面板”,如圖三所示:

                 圖三 轉換動態面板

4、向“滾動文字動態面板”動態面板中添加狀態,我采用了復制狀態按鈕實現,選擇State1,然后State1中的“復制狀態”按鈕,如圖四所示:

               圖四 復制狀態

5、選擇文字標簽,然后再屬性--交互--“狀態改變時”雙擊,如圖五所示:

             圖五 添加狀態事件

6、向文本標簽設置動作,在彈出框中添加動作一欄,找到 “移動”后點擊,然后在右側配置動作中選中“滾動文字動態面板(動態面板)”,如圖六所示:

                  圖六 添加移動事件

7、配置移動參數,還是在圖六所示的圖中,找到配置動作下方的移動選項,將移動選中設置為“絕對位置”,然后選中x:文本框后的fx,點擊fx設置偏移量,

點擊fx后彈出頁面,在彈出頁面中找到最上面的插入變量和函數並點擊,然后選中元件中的x值,最后將This.x后增加“-10”

如圖七所示:

 

               圖七 設置參數

 8、增加全局變量my_move_x,將變量值設置為500(因為矩形3的寬度決定),如圖八所示:

 

                        圖八 添加自定義全局變量

9、添加判斷條件,如圖九所示:

              圖九 添加判斷條件

10、將文本標簽移動到右側初始位置,如圖十所示:

 

 

 

                       圖十 移動文本標簽

 以上為文本標簽移動配置,所有的准備好后,還需讓讓文本標簽的“狀態改變時”事件觸發,下面開始觸發“狀態改變時”的事件。

 11、選中矩形3,然后右側屬性--交互中選中“載入時”,如圖十一所示:

 

 

                圖十一 增加觸發事件

 

 總結:

動態面板狀態改變可當作定時器來使用

 

 

 

附件下載地址:https://files.cnblogs.com/files/-ShiL/%E6%96%87%E5%AD%97%E6%BB%9A%E5%8A%A8%E6%A1%88%E4%BE%8B.rar

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM