圖層實現邏輯【手機端教程】

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

綜合上面(miàn)的問題，我們則需要一種(zhǒng)既有能(néng)夠産生爽快打擊感的解決形式。

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

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

②每層（至少3層）單獨複制出來進(jìn)行進(jìn)行部分細節微調，然後(hòu)再對(duì)每個圖層【高斯模糊】【局部壓暗】【添加雜色】等處理，制作出一種(zhǒng)在玻璃後(hòu)面(miàn)的感覺。

③這(zhè)次我們準備做一個點擊三次即可完全擊碎玻璃的效果，所以我在做玻璃裂紋的時候隻做了3層。每一層裂紋的邊緣都(dōu)盡量連接到一起(qǐ)，這(zhè)樣(yàng)才能(néng)保證玻璃破碎的合理性。在玻璃被(bèi)擊碎的部分，則露出背景的部分。

④後(hòu)整理好(hǎo)分層加上組件、Slogan完成(chéng)。

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

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