手勢解鎖動畫:有相關的路徑提示按鈕,並且劃過的軌跡會變色,最後解鎖成功與解鎖失敗會出現不同效果。你可以隨心制定專屬於你的解鎖軌跡。
工具/原料
iH5
方法/步驟
選中舞臺,點選工具欄的圖片工具,在舞臺上畫一個框,上傳新增需要的背景圖片。這裡新增的是一張背景圖片和一張含有“歡迎回來”字樣的png圖片。當然,我們也可以直接使用工具欄的文字工具或者中文字型工具來加上文字。
1、選中舞臺,點選時間軸工具,選中時間軸,點選圖片工具,共上傳3張圖片。
2、選中圖片,點選軌跡工具,新增軌跡。其中覆蓋層是在眼睛上方的一層與背景顏色相同的圖片,給它制定的軌跡是先向下再向上運動,上半層圖片中分別包含兩個眼睛的圖片,製作的軌跡是眼睛的拉伸與還原,這樣配合覆蓋層的動效,就會形成一個比較生動的睜眼效果。而上半層圖片和下半層圖片的分離是在睜眼動效完成之。後分別設定了一個向上運動和向下運動的軌跡,即分別在初始位置後最後位置設定關鍵幀就可以了。下半層是一張png圖片,其中包含的鏤空圖案就是待會要設定的擦除軌跡。所以大家可以根據需要設定自己喜歡的擦除圖案和形狀。
1.選中舞臺,點選時間軸工具,新增提示動畫時間軸。利用時間軸給提示游標設定路徑,因為路徑是曲折的,在兩個相鄰的關鍵幀之間是以直線來運動的,所以就要對每一個拐彎點都設定關鍵幀。另外對提示動畫設定了自動播放,這樣在作品開啟的時候就會播放提示動畫,而在這對軌跡設定了結束顯示是NO,並且對時間軸設定了不迴圈播放,所以提示游標在播放完一輪之後就會消失。
2.接下來新增的是木有解開動畫效果,同樣也是用時間軸來設定。選中舞臺,點選時間軸工具,新增一個木有解開的動畫。給木有解開圖片新增的關鍵幀設定了放大縮小的效果,形成一種彈動的動效。另外因為木有解開的動效是解鎖失敗觸發的,所以,自動播放的選項設定NO。(木有解開動畫的開始顯示和結束顯示都是YES,而在開始並沒有看。。見這個圖片,那是由於我們在設定軌跡時,對它的第一個關鍵幀的透明度設定的是0)
1. 最後來製作擦除效果需要的內容,新增畫圖工具,隱藏其它的物件我們可以看出這就是一個手勢的軌跡圖,這是在畫圖工具裡面載入的一張PNG圖片,當然,大家也可以用畫筆來畫這個軌跡。因為需要擦除的效果,所以這裡要對畫筆型別設定橡皮擦並對線條寬度做相應的設定還有允許畫圖的設定。
2.給畫圖新增四個事件,選中畫圖,點選事件工具,使手勢解鎖成功時“解開動畫”開始播放(事件1),畫圖1隱藏(事件2),解鎖事件失敗則播放“木有解開”動畫(事件3)。而木有解開動畫顯示後我們依舊可以繼續進行解鎖,當解鎖成功時木有解開時間軸就會跳至0時刻,即透明度為0(事件4),就不會顯示“木有解開”了,同時解開動畫也會播放。(手勢擦除指的是擦除畫圖中有內容的圖畫,大小的百分比越大,擦除的精度就要求更高。)
除軌跡的長度),擦除的長度不超於設定的長度且同時擦除的範圍在設定的大小之內,目標動作就會被觸發;否則,在不滿足任意一個條件的情況下,目標動作都不會被觸發;但是,如果只設置大小,不規定長度,則擦除軌跡的長度不會受限制,只要擦除範圍在設定的大小之內,目標動作就會被觸發。
重點事件:
觸發物件:畫圖
觸發條件:手勢擦除
大小:60%
目標物件:解開動畫
目標動作:繼續播放
觸發物件:畫圖
觸發條件:手勢擦除少於
大小:60%
目標物件:木有解開
目標動作:從頭播放