在上一小節(jié)中，相信大家跟著小編的教程都能夠順利完成這款網(wǎng)頁(yè)小游戲的靜態(tài)場(chǎng)景制作，在本小節(jié)中，小編將帶著大家完成網(wǎng)頁(yè)小游戲的動(dòng)畫錄制部分。
第一步：從上一節(jié)的游戲預(yù)覽效果可以看到，游戲過(guò)程中，上方的矩形一直來(lái)回橫向移動(dòng)，作為游戲干擾因素，提高游戲可玩性，因此我們需要對(duì)矩形制作一個(gè)不停來(lái)回移動(dòng)的動(dòng)畫。選中矩形，然后點(diǎn)擊“錄制”按鈕，移動(dòng)時(shí)間線到00:05:00秒處，然后移動(dòng)矩形到下圖所示位置（左側(cè)移動(dòng)至右側(cè)位置），這樣就完成了矩形橫向移動(dòng)的動(dòng)畫。
圖1：設(shè)置矩形動(dòng)態(tài)移動(dòng)
第二步：
在5秒處點(diǎn)擊時(shí)間線操作旁的加號(hào)按鈕，打上一個(gè)關(guān)鍵幀，設(shè)置時(shí)間線操作為“開始時(shí)間線”，時(shí)間線選擇“主時(shí)間線”，勾選上倒序播放，如下圖2；然后再移動(dòng)時(shí)間線到0秒處，打上一個(gè)關(guān)鍵幀，設(shè)置時(shí)間線操作為“開始時(shí)間線”，時(shí)間線選擇“主時(shí)間線”，這里不要勾選倒序播放。這樣就完成了矩形來(lái)回移動(dòng)的動(dòng)態(tài)效果了，游戲障礙算是設(shè)置完成。
圖2：打關(guān)鍵幀
第三步：
點(diǎn)擊時(shí)間線，然后選擇創(chuàng)建時(shí)間線，創(chuàng)建四個(gè)新的時(shí)間線，如下圖3紅框，分別是“PaddleLeft-Hit”、“PaddlegLeft-Release”、“PaddleRight-Hit”和“PaddleRight-Release”，這四個(gè)對(duì)應(yīng)左右兩個(gè)矩形元素的翹起和釋放。
圖3：4個(gè)新時(shí)間線
第四步：切換到“PaddleLeft-Hit”時(shí)間線，然后選擇對(duì)應(yīng)的左邊的矩形，確保在0秒時(shí)，矩形元素的旋轉(zhuǎn)角度為（20,0,0），再點(diǎn)擊“錄制”按鈕，移動(dòng)時(shí)間線到00:00:05處，設(shè)置矩形的旋轉(zhuǎn)角度為（-20,0,0），以上動(dòng)畫效果，制作了左邊矩形翹起的一個(gè)動(dòng)畫效果；對(duì)于時(shí)間線“PaddleRight-Hit”同樣如此操作，只是旋轉(zhuǎn)角度Z從-20度變?yōu)?0度。
圖4：制作矩形翹起的動(dòng)畫
第五步：切換到“PaddleLeft-Release”時(shí)間線，然后選擇對(duì)應(yīng)的左邊的矩形，再點(diǎn)擊“錄制”按鈕，移動(dòng)時(shí)間線到00:00:18處，設(shè)置矩形的旋轉(zhuǎn)角度為（20,0,0），如下圖5；再切換到“PaddleRight-Release”時(shí)間線，然后選擇對(duì)應(yīng)的右邊矩形，點(diǎn)擊“錄制”按鈕，移動(dòng)時(shí)間線到00:00:18處，設(shè)置矩形的旋轉(zhuǎn)角度為（-20,0,0）。
圖5：制作矩形釋放的動(dòng)畫
第六步：增加觸發(fā)事件，游戲中，點(diǎn)擊左邊的L方塊，左邊矩形會(huì)翹起，松開方塊則矩形會(huì)釋放，這就需要我們?yōu)長(zhǎng)方塊增加一個(gè)觸發(fā)事件，選中左邊矩形，在Hype的“操作檢查器”中，為“鼠標(biāo)向下移動(dòng)時(shí)”，添加一個(gè)操作，操作選擇“開始時(shí)間線”，時(shí)間線選擇“PaddleLeft-Hit”，再為“鼠標(biāo)向上移動(dòng)時(shí)”，添加一個(gè)操作，操作選擇“開始時(shí)間線”，時(shí)間線選擇“PaddleLeft-Release”，如下圖6所示，當(dāng)然，對(duì)于R方塊也是同理，需要增加觸發(fā)事件。
圖6：增加矩形觸發(fā)事件
第七步：選中“Reset”按鈕，在“操作檢查器”中，添加一個(gè)“鼠標(biāo)點(diǎn)按時(shí)”的觸發(fā)操作，操作選擇“跳到場(chǎng)景”，場(chǎng)景默認(rèn)選擇當(dāng)前場(chǎng)景，具體如下圖7，完成以后，點(diǎn)擊Reset按鈕即可重置場(chǎng)景，重新開始游戲了。
圖7：為Reset按鈕增加觸發(fā)事件
上面就是關(guān)于網(wǎng)頁(yè)小游戲動(dòng)畫的一些設(shè)置步驟，在最后一小節(jié)中，小編會(huì)將元素賦予物理量，其中包括重力和彈力等，使元素對(duì)象能夠模擬現(xiàn)實(shí)情況進(jìn)行移動(dòng)，提高游戲可玩性和真實(shí)性，Hype的物理量功能也是Hype強(qiáng)大的功能之一，大家繼續(xù)往下看吧！
