之前不少項(xiàng)目都想做一種玻璃破碎的來表現(xiàn)痛快打擊感動(dòng)畫效果，雖然平面的效果容易做出來，但是動(dòng)畫的效果往往很難做出立體優(yōu)秀的效果，加上手機(jī)端不能使用FLASH，所以需要一種，前端也能輕松實(shí)現(xiàn)的痛快打擊感效果的方案。這種方法通過圖層的疊加及素材的晃動(dòng)讓用戶產(chǎn)生一種玻璃破裂的幻覺。
1.分析
①目的是表現(xiàn)打擊感，讓人產(chǎn)生爽快斬?fù)舻母杏X。
②需要有一種痛快打擊感的效果。
③手機(jī)端僅用CSS不能很好的做出3D飛濺的效果。
綜合上面的問題，我們則需要一種既有能夠產(chǎn)生爽快打擊感的解決形式。
打擊感：【影之刃】這款游戲在打擊感上面做得非常優(yōu)秀。這次在解決爽快斬?fù)舻男问缴蟿t著重參考了，玩家每次點(diǎn)擊手機(jī)的交互由畫面晃動(dòng)產(chǎn)生打擊的快感。
玻璃破碎：由于我們的玻璃破碎效果源于平面效果圖，通過搜集一些動(dòng)漫的案例發(fā)現(xiàn)，擊碎玻璃的效果可以通過震動(dòng)加圖片切換的方式來達(dá)成。
實(shí)現(xiàn)方式：由于參考了動(dòng)漫的案例，所以可以直接使用CSS來制作，降低的制作的難度。
最終解決方案如圖（GIF）：
2.視覺圖制作
①首先需要把背景底圖給做好，并且做好單獨(dú)的分層
②每層（至少3層）單獨(dú)復(fù)制出來進(jìn)行進(jìn)行部分細(xì)節(jié)微調(diào)，然后再對(duì)每個(gè)圖層【高斯模糊】【局部壓暗】【添加雜色】等處理，制作出一種在玻璃后面的感覺。
③這次我們準(zhǔn)備做一個(gè)點(diǎn)擊三次即可完全擊碎玻璃的效果，所以我在做玻璃裂紋的時(shí)候只做了3層。每一層裂紋的邊緣都盡量連接到一起，這樣才能保證玻璃破碎的合理性。在玻璃被擊碎的部分，則露出背景的部分。
④最后整理好分層加上組件、Slogan完成。
3.交互及動(dòng)畫
①點(diǎn)擊屏幕時(shí)，主角部分固定，出現(xiàn)斬?fù)簦⑶也ＡР糠职l(fā)生晃動(dòng)，。在細(xì)節(jié)上讓斬?fù)舯炔ＡЩ蝿?dòng)更快一些，能產(chǎn)生一種前后的空間感。
在圖片參數(shù)設(shè)置：
A.斬?fù)粜枰鲆粋€(gè)大小60%-100%的變化，透明度也要做一個(gè)0%~100%的快速顯示、消失。
B.晃動(dòng)，角色的位置不變，通過設(shè)置玻璃 左20PX 右20PX 左10PX 右10PX 即可達(dá)到晃動(dòng)效果。
②添加玻璃破碎效果。在斬?fù)翎尫艜r(shí)，伴隨點(diǎn)擊晃動(dòng)，玻璃擊碎的圖片也要使用透明度變化進(jìn)行替換。
由以下4張圖連續(xù)漸變替換
A.玻璃被裂痕圖片PNG
B.完整模糊玻璃圖片JPG
C.模糊玻璃被擊穿圖片PNG
D.模糊玻璃破碎圖片PNG
③圖層層級(jí)如圖：（A為頂層M為底層）
4.結(jié)
雖然并沒有完整的實(shí)現(xiàn)視覺上的3D玻璃擊碎及斬?fù)舻男Ч窃谟脩舻牟僮魃弦琅f能在心理上達(dá)到一種自己擊碎玻璃的痛快打擊感，是一種不錯(cuò)的替代方案。
注：以上參考案例皆為飛機(jī)稿，感謝EGDC一起做飛機(jī)稿的智爺。
--------------------------------------------------------------------
秉承不寫出來就不能造福社會(huì)的理念，這篇博文前前后后的經(jīng)歷略顯曲折，以至于我一直猶豫是否要發(fā)出來，所以一直沒發(fā)東西，而轉(zhuǎn)向了寫攻略，游戲攻略，對(duì)，寫了很多.............最終我還是沒有按耐住寂寞，發(fā)了出來- -
轉(zhuǎn)載自：http://www.uehtml.com/post/42976/
丨夸米科技丨
咨詢直線：186-2370-8562 官方網(wǎng)站：www.iraundi.cn
17260717688
