下面我們來學(xué)習(xí)一下iH5中級教程中的活動必備，實現(xiàn)H5的倒計時功能。首先，我們需要添加媒體素材。選中舞臺，點擊頁面工具，新建一個頁面，并將其重命名為"倒計時"。然后，點擊圖片工具，上傳倒計時結(jié)束后會出

下面我們來學(xué)習(xí)一下iH5中級教程中的活動必備，實現(xiàn)H5的倒計時功能。首先，我們需要添加媒體素材。選中舞臺，點擊頁面工具，新建一個頁面，并將其重命名為"倒計時"。然后，點擊圖片工具，上傳倒計時結(jié)束后會出現(xiàn)的圖片對象“漫畫”。由于倒計時結(jié)束后要顯示漫畫和內(nèi)容為“少俠，您的時間到了！”的中文字體，所以我們需要讓中文字體和漫畫同時顯示。選中“漫畫”對象，點擊中文字體工具，添加中文字體，使其成為“漫畫”對象的子對象，繼承“漫畫”對象的屬性和動作。

在“倒計時”頁面下方添加內(nèi)容為“您的游戲時間還有”的中文字體。文字內(nèi)容可以根據(jù)自己的需求進(jìn)行自定義。

設(shè)置用于倒計時的計數(shù)器

接下來，我們需要設(shè)置用于倒計時的計數(shù)器。選中“倒計時”頁面，添加一個計數(shù)器。并找到舞臺左邊的計數(shù)器屬性面板，在初始值中設(shè)置為5，最小值設(shè)置為0。然后，在計數(shù)器下方添加內(nèi)容為“秒”的中文字體。

制作倒計時效果

現(xiàn)在，我們開始制作倒計時效果。選中“倒計時”頁面，添加一個時間軸，并將其重命名為“計時時間軸”。在左邊的屬性面板中，設(shè)置時間軸自動播放，總時長設(shè)置為1秒并設(shè)置循環(huán)播放。

選中“計時時間軸”，在這個時間軸下添加一個事件。觸發(fā)條件為結(jié)束，目標(biāo)對象是第二步中的計數(shù)器，目標(biāo)動作為減1。這樣設(shè)置的原理是時間軸每播放1秒結(jié)束后，讓計數(shù)器減1。由于時間軸循環(huán)播放，所以計數(shù)器每一秒會減1，從而實現(xiàn)倒計時的效果。

在計數(shù)器下方再添加一個事件，觸發(fā)條件為等于，值為0，目標(biāo)對象是“計時時間軸”，目標(biāo)動作為暫停。這個事件可以防止時間軸繼續(xù)循環(huán)播放，計數(shù)器繼續(xù)減1從而變成負(fù)數(shù)的情況。

制作出現(xiàn)的動畫效果

我們還可以為倒計時結(jié)束后的漫畫對象添加一個動效，讓它在倒計時結(jié)束后放大出現(xiàn)。選擇“漫畫”對象，在其下方添加一個動效，時長設(shè)置為1秒，動效類型為放大出現(xiàn)，自動播放設(shè)置為NO。注意：動效的自動播放默認(rèn)為YES，即默認(rèn)狀態(tài)下打開案例動效會自動播放。由于本案例中的圖片需要倒計時結(jié)束后出現(xiàn)，所以要將動效的自動播放設(shè)置為NO，不允許它自動播放。

在計數(shù)器下方再添加一個事件，觸發(fā)條件為等于，值為0，目標(biāo)對象是“漫畫”對象下的動效1，目標(biāo)動作為開始。當(dāng)?shù)褂嫊r結(jié)束之后，即計數(shù)器等于0，動效開始播放，從而實現(xiàn)動畫效果。

快速數(shù)字變化步驟

首先，我們需要添加媒體素材。選中舞臺，新建一個頁面，并將其重命名為"數(shù)值動態(tài)增加"。然后，在頁面下方添加內(nèi)容為"%"和"百分比"的字體，并將其移動到合適的位置。

選中“數(shù)值動態(tài)增加”頁面，上傳一張帶有鏤空圓且與舞臺大小相同的圖片。為了讓文字更明顯，我們可以將前面的文字和后面所有的文字以及計數(shù)器都設(shè)置成白色。

接下來，我們開始制作快速增加的數(shù)值變化效果。選中“數(shù)值動態(tài)增加”頁面，在頁面下方添加一個計數(shù)器。在舞臺左邊的屬性面板中，適當(dāng)調(diào)整計數(shù)器的樣式和大小，并將最大值設(shè)置為85。

在頁面下方再添加一個時間軸，并將其重命名為“計時器”。將時間軸設(shè)置為自動播放，時長設(shè)置為0.02秒并設(shè)置循環(huán)播放。

在“計時器”時間軸下添加一個事件，觸發(fā)條件為結(jié)束，目標(biāo)對象為這個頁面里的計數(shù)器1，目標(biāo)動作為加1。即案例播放時，“計時器”時間軸會自動播放且循環(huán)播放，每次播放結(jié)束后，計數(shù)器就會加1。

在計數(shù)器下方再添加一個事件，觸發(fā)條件為等于，值為85，目標(biāo)對象是“計時器”時間軸對象，目標(biāo)動作為暫停。即當(dāng)計數(shù)器不斷加1，直至加到85時，時間軸停止播放。這個事件可以防止“時間軸繼續(xù)循環(huán)播放，計數(shù)器顯示的數(shù)值不斷增加”的情況。

制作增加的進(jìn)度條動態(tài)效果

因為前面已經(jīng)上傳了帶有鏤空圓條的圖片，所以只需要制作逐漸增加的進(jìn)度條效果。選中“數(shù)值動態(tài)增加”頁面，添加一個時間軸，并將其設(shè)置為自動播放，時長為2.5秒。然后，將其拖動到鏤空圓條圖片的上一層。

選中時間軸，添加兩個透明按鈕，并為其添加填充顏色和軌跡。通過關(guān)鍵幀設(shè)置動畫，使色塊隨著鏤空圓條逐漸填充。兩個色塊的關(guān)鍵幀設(shè)置是通過位置和寬高的變化來實現(xiàn)的。

在時間軸下方添加一個事件，觸發(fā)條件為結(jié)束，目標(biāo)對象是計時器，目標(biāo)動作為暫停。這樣可以防止進(jìn)度條播放結(jié)束后，表示進(jìn)度數(shù)字的計數(shù)器還在增加的情況。

將鏤空圓條