国产欧美乱伦中文-国产欧美日-国产欧美日本不卡-国产欧美日本精品-国产欧美日本亚-国产欧美日本亚洲

之前不少項(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/