圖層實(shí)現邏輯【手機端教程】

之前不少項目都想做一種玻璃破碎的來(lái)表現痛快打擊感動(dòng)畫(huà)效果，雖然平面的效果容易做出來(lái)，但是動(dòng)畫(huà)的效果往往很難做出立體優(yōu)秀的效果，加上手機端不能使用FLASH，所以需要一種，前端也能輕松實(shí)現的痛快打擊感效果的方案。這種方法通過(guò)圖層的疊加及素材的晃動(dòng)讓用戶(hù)產(chǎn)生一種玻璃破裂的幻覺(jué)。
 
1.分析
①目的是表現打擊感，讓人產(chǎn)生爽快斬擊的感覺(jué)。
②需要有一種痛快打擊感的效果。
③手機端僅用CSS不能很好的做出3D飛濺的效果。
 

綜合上面的問(wèn)題，我們則需要一種既有能夠產(chǎn)生爽快打擊感的解決形式。

打擊感：【影之刃】這款游戲在打擊感上面做得非常優(yōu)秀。這次在解決爽快斬擊的形式上則著(zhù)重參考了，玩家每次點(diǎn)擊手機的交互由畫(huà)面晃動(dòng)產(chǎn)生打擊的快感。
玻璃破碎：由于我們的玻璃破碎效果源于平面效果圖，通過(guò)搜集一些動(dòng)漫的案例發(fā)現，擊碎玻璃的效果可以通過(guò)震動(dòng)加圖片切換的方式來(lái)達成。
實(shí)現方式：由于參考了動(dòng)漫的案例，所以可以直接使用CSS來(lái)制作，降低的制作的難度。
 
終解決方案如圖（GIF）：

2.視覺(jué)圖制作
①首先需要把背景底圖給做好，并且做好單獨的分層

②每層（至少3層）單獨復制出來(lái)進(jìn)行進(jìn)行部分細節微調，然后再對每個(gè)圖層【高斯模糊】【局部壓暗】【添加雜色】等處理，制作出一種在玻璃后面的感覺(jué)。

③這次我們準備做一個(gè)點(diǎn)擊三次即可完全擊碎玻璃的效果，所以我在做玻璃裂紋的時(shí)候只做了3層。每一層裂紋的邊緣都盡量連接到一起，這樣才能保證玻璃破碎的合理性。在玻璃被擊碎的部分，則露出背景的部分。

④后整理好分層加上組件、Slogan完成。

3.交互及動(dòng)畫(huà)
①點(diǎn)擊屏幕時(shí)，主角部分固定，出現斬擊，并且玻璃部分發(fā)生晃動(dòng)，。在細節上讓斬擊比玻璃晃動(dòng)更快一些，能產(chǎn)生一種前后的空間感。
在圖片參數設置：
A.斬擊需要做一個(gè)大小60%-100%的變化，透明度也要做一個(gè)0%~100%的快速顯示、消失。
B.晃動(dòng)，角色的位置不變，通過(guò)設置玻璃 左20PX 右20PX 左10PX 右10PX 即可達到晃動(dòng)效果。
②添加玻璃破碎效果。在斬擊釋放時(shí)，伴隨點(diǎn)擊晃動(dòng)，玻璃擊碎的圖片也要使用透明度變化進(jìn)行替換。
由以下4張圖連續漸變替換
A.玻璃被裂痕圖片PNG
B.完整模糊玻璃圖片JPG
C.模糊玻璃被擊穿圖片PNG
D.模糊玻璃破碎圖片PNG
③圖層層級如圖：（A為頂層M為底層）

4.結
雖然并沒(méi)有完整的實(shí)現視覺(jué)上的3D玻璃擊碎及斬擊的效果，但是在用戶(hù)的操作上依舊能在心理上達到一種自己擊碎玻璃的痛快打擊感，是一種不錯的替代方案。