App Inventor學習記錄90-用計時器做顏色漸變效果,用外掛做顏色漸變效果

這次要介紹的是顏色的漸變效果,可以套用在按鈕、標籤、垂直水平配置、畫布等等。這次分兩個部份來做,一個是用計時器,一個則是用現成的外掛。
記錄一下:
App Inventor學習記錄90-用計時器做顏色漸變效果,用外掛做顏色漸變效果


在畫面配置的地方放了兩個按鈕。
一個用來顯示用計時器做出的效果。
一個用來顯示用外掛做出的效果。


全部的程式碼如下。


先來看第 1種,用計時器寫的顏色漸變效果。


第 1-1部份的程式碼說明:

建立兩個變數,這兩個變數是用來控制 RGB的數值用的。
當計時器按鈕被點擊的時候
就把計時器 1.啟用計時,設定為真。


第 1-2部份的程式碼說明:

當計時器 1開始計時的時候:
把顏色變數的值,每次加 5。這裡計時器的計器間隔設定的是 50。
設定標籤 1.背景顏色,設定一下。

如果顏色變數的值如果等於 255的話。
把計時器 1.啟用計時,設定為假。
把計時器 2.啟用計時,設定為真。
把顏色變數的值設定為 0。

這裡用兩個計時器是為了讓顏色可以變過來再變回去。


第 1-3部份的程式碼說明:

計時器 1是把顏色累加,計時器 2是把顏色的數字一直減下去。

這種方法的缺點就是顏色不好算,如果是同一個色系還好,就是數字加加減減,如果有好幾個顏色要調整的話,就要多加入好幾個變數。


所以接下來我們用外掛來做,先來看一下第二種方法的效果。


用外掛做的好處是不用拉計時器。這裡要用的外掛連結如下:
https://community.thunkable.com/t/free-animation-color-background-extension/5275

下載 aix檔之後,我們把它匯入 app inventor內。匯入的介紹請見:
小技巧,怎麼匯入 app inventor的外掛(extension)到程式中

說明一下這個外掛的使用方法
在 input這裡,放入要調整顏色的元件。
在 color start這裡,放入初始顏色。
在 color end這裡,放入最終顏色。
持續時間,這裡要放是多久之後,會變成最終的顏色。

這裡補充一下,這裡的顏色要用 #ff00ff這樣子的格式才行。


用外掛來做的好處很明顯,就是顏色很好取,只要放開始顏色、結束顏色和時間,其它的都不用管。不用像第一種方法,又要變數、又要計時器,寫起來有點麻煩。
但缺點也是有的,比方說我找不到怎麼把顏色變過去之後,怎麼把它變回來。

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

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

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

發佈留言