App Inventor學習記錄85,三種文字跑馬燈顯示效果的範例說明

文字跑馬燈常常出現在網站的公告上,使用的範圍也挺廣的,這次就來記錄一下:
App Inventor學習記錄85,三種文字跑馬燈顯示效果的範例說明


這次要介紹的三種跑馬燈效果如下

要顯示跑馬燈的顯示效果,不用 gif的話,還真的挺難形容的。
這次用來錄 gif的免費程式是:
LICEcap,超輕量錄制營幕畫面成gif的軟體


這一次的跑馬燈的畫面配置如下:

三個水平配置,分別放置三種跑馬燈的效果。
當開始按鈕按下之後,就會開始顯示。

第一種跑馬燈的效果說明:
在顯示文字的前面和後面,分別加上數個空白字元,然後利用計時器元件,讓新的字串一次只顯示 8個字元。這樣子設定下來,就會出現文字慢慢出現的感覺。

第二種跑馬燈的效果說明:
這裡同樣是利用計時器的功能,把跑馬燈的文字,隨著計時器的計時,增加要顯示文字的長度

第三種跑馬燈的效果說明:
這個則是利用畫布清除和畫布加文字的效果來做。同樣要搭配計時器來使用。

在畫面配置中,為了可以分開三種效果,我加了三個計時器的元件。
時間間隔都設定成 300。


全部的程式碼如下:


第 1部份的程式碼說明:
一開始,同樣是設定變數的部份,這裡有三種跑馬燈的效果,所以分別設定三組變數。
跑馬燈 1的變數如下:

這幾個變數中,最主要的就是跑馬燈 1前後空白的這個變數。
這個變數中,代入的值是 8個空白。所以在長度上看起來不一樣。

跑馬燈 2的變數如下:

這裡同樣多設定了一個跑馬燈 2前空白的變數。
主要是在讓跑馬燈 2在顯示時的第一個效果是空白,然後才慢慢的出現更多的文字。

跑馬燈 3的變數如下:


當開始按鈕被按下的時候:

跑馬燈效果 1的部份。
1.  把跑馬燈輸入的文字這個變數的值,設定成文字輸入框的內容
2.  把時間變數 1時間變數 2這兩個變數的值,都設定為 1。
3.  如果跑馬燈輸入的文字的值,是空白的話。
就把跑馬燈 1顯示效果,設定成文字方塊的組合,只是在文字串的前後,加上空白字元。

如果不是空白的話,把輸入的文字,在前後都加上空白的字元。


跑馬燈效果 2的部份:

同樣都是字串的組合。
然後就把對應的計時器給啟動。


跑馬燈效果 3的部份:

這裡是因為用的是畫布元件,所以我們要先設定跑馬燈 3 x的位置,設定等於畫面的寬度。
然後啟動計時器的元件。


第 3部份的程式碼說明:

當跑馬燈時鐘 1計時器開始計時:
把時間變數,設定成每次計時候加 1。
如果時間變數的值,大於總顯示效果長度減去 8的時候,就把這個值設定回 1。
跑馬燈顯示的文字這個標籤的文字,設定成跑馬燈 1顯示效果,從時數變數這個值開始,取 8個文字出來顯示……有點難解釋,用範例來顯示。

假設我們在文字輸入盒中輸入的文字是,你忘了輸入文字了哦
當我們按下開始按鈕之後,跑馬燈 1的顯示效果的值,就會變成下面這樣,空白用 x代替一下。
xxxxxxxx忘了輸入文字了哦xxxxxxxx

當時間變數等於 1的時候,顯示的文字就是 xxxxxxxx。
當時間變數等於 2的時候,顯示的文字就是 xxxxxxx忘。
當時間變數等於 3的時候,顯示的文字就是 xxxxxx忘了。
當時間變數等於 4的時候,顯示的文字就是 xxxxx忘了輸。
以此類推,就會出現像跑馬燈的效果了。


第 4部份的程式碼說明:

跑馬燈 2的顯示效果設定成跑馬燈 2輸入的文字,每次加一個文字。
然後讓它顯示出來,同樣舉例:忘了輸入文字了哦
時間變數 2等於 1的時候,出現的值是 x。
時間變數 2等於 2的時候,出現的值是 x忘。
時間變數 2等於 3的時候,出現的值是 x忘了。
時間變數 2等於 4的時候,出現的值是 x忘了輸。
以此類推。


第 5部份的程式碼說明:

這次是由於是畫布的元件,所以計時器一開始計時的時候,我們把畫布給清除,然後修改文字的位置,這樣就會出現像跑馬燈的效果。


第 6部份的程式碼說明:

就是把值都設定回初始值,這裡就不多說明了。


這次介紹的是三種文字跑馬燈的效果,如果有什麼問題的話,歡迎大家留言討論。

這次的 aia檔的下載連結如下:
點我下載 NO_85_label_running

參考書籍如下:
手機應用程式設計超簡單 App Inventor 2零基礎入門班
TQC+ 創意App程式設計認證指南
TQC+創意App程式設計認證指南解題秘笈
手機應用程式設計超簡單:App Inventor 2初學特訓班
手機應用程式設計超簡單:App Inventor 2小專題特訓班
手機應用程式設計超簡單:App Inventor 2資料庫專題特訓班

之前介紹過的一些 appinventor的使用記錄,都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面

發表迴響