除此之外,還可以設定動畫特效重覆幾次、動畫時間、以及動畫延遲的效果。
這次的範例完成品如下。
可以用的清單一共有 68種,所以這裡把這些效果,照英文字母的排列,建成一個清單,再用 listview清單顯示器顯示出來。所以只要點擊清單顯示器中的項目,就會自動的把選中的動畫特效套用在上方的標籤、按鈕、水平配置、以及圖片上。
方便下次要用的時候,才可以看到對應的動畫效果名稱,倒底是什麼樣的效果。
畫面編排的部份如下。
目前有測試標籤、按鈕、水平配置、以及圖片這幾個元件,都可以套用。
而且在手機上也可以正常的顯示。
全部的程式碼如下。
第 1部份用到的方塊說明。
建立變數_b1、d1、f1、h1、l1、p1、r1、s1、t1、w1、z1,用 make a list的方塊,照英文字母的順序,把對應的動畫效果名稱都加入到清單中。
b1清單放的就是 b開頭的動畫效果。
d1清單放的就是 d開頭的動畫效果。
以此類推。
第 2部份用到的方塊說明。
when scree1.initialize當程式初始化的時候。
用 append to list的清單方塊,把 list 2清單中的項目,全部都到 list 1的清單的後面。
這裡有好幾個清單,所以就要做好幾次。
把其它清單 d1、f1等等的,通通加到 b1清單的後面。
set listview.elements to get global b1,由於前面已經把其它的清單項目,通通加入到 b1這個清單中了,所以這裡把清單顯示器的元素,設定成 b1這個清單就可以了。
set label 2.text to length of list list get global b1,把標籤 2的文字,設定成 b1清單的長度。
這個是為了要看看到底這個外掛能套用幾個動畫效果。答案是 68種。
第 3部份用的方塊說明。
有一些動畫效果在套用之後,該元件會變的看不見,但還是有佔位置,所以版面不會跑掉。這樣是為了測試在套用動畫效果之後,按鈕的效果還會不會有作用。
when button 1.click當按鈕 1被點擊的時候。
set label 2.text to,把標籤 2的文字設定成指定的文字。
測試的效果如下。
如果套用動畫效果後,按鈕不見了,那麼這個按鈕就不會起作用。
如果套用畫畫效果後,按鈕還在畫面上的話,那麼這個按鈕就還是可以按的。
第 4部份用到的方塊說明。
when listview 1.afterpicking,當選擇了清單顯示器的項目之後。
call phase 1.animate component,呼叫外掛套用的程式。
id參數,這個外掛可以同時間套用在不同的元件上,所以這裡把每個元件的 id都設定成不同數字。
componet參數,指定要套用的元件是什麼。
technique參數,指定要套用的動畫效果。
因為前面已經把全部的動畫效果都建成一個清單 b1,然後放在清單顯示器上。所以從清單顯示器選中的選中項,也就是 listview.selection,就是我們要套用的效果。
這裡也可以直接拉外掛中的動畫效果放在這裡。
delay參數,指定隔多少毫秒之後,才套用動畫效果。
duration參數,動畫效果的持續時間。
repeatcount參數,動畫效果要重覆幾次。
這個外掛真的是超強的,建議大家一定要試試看。
這次的 aia檔的下載連結如下:
NO_143_Phase.aia
APP INVENTOR外掛
名稱:Phase
外掛來源:
外掛載點:community.appinventor.mit.edu
https://community.appinventor.mit.edu/t/phase-animations-made-easy/786
參考書籍請見博客來書籍介紹頁面:
手機應用程式設計超簡單 App Inventor 2零基礎入門班
TQC+ 創意App程式設計認證指南
TQC+創意App程式設計認證指南解題秘笈
手機應用程式設計超簡單:App Inventor 2初學特訓班
手機應用程式設計超簡單:App Inventor 2小專題特訓班
手機應用程式設計超簡單:App Inventor 2資料庫專題特訓班
之前介紹過的一些 appinventor的使用記錄,都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面