今天騰訊的何六六同學(xué)把最近做的一個超贊的H5總結(jié)筆記分享出來，將設(shè)計動效、具體實現(xiàn)方法、踩到的一些坑都完整梳理了一遍，全文高能干貨，強烈建議學(xué)習(xí)喲!

　　前言

　　最近火熱的有聲娛樂平臺 APP，企鵝 FM(編者注：此處絕非廣告)，在8月28日鬼節(jié)前夕，聯(lián)合《盜墓筆記》推出了“勇敢者的游戲”活動。作為一個 UI 工程師，在這個移動互聯(lián)網(wǎng)叱咤風云的時代，每次看到朋友圈中被分享的各種花樣 H5 頁面，總是心癢難耐，也想做有著酷炫動畫和帶感聲效的 H5 呢。回想到做鬼節(jié)活動頁的時候，接近午夜零點還在調(diào)整頁面效果，看著頁面上漸隱漸現(xiàn)的可怕畫面，活生生嚇到了自己，也是蠻難忘的。作為剛剛來到活動頁新手村的朋友，踩到了一些坑，所以讓我進入正題吧。哦，等一下，請先掃一下二維碼啦~

　　與設(shè)計師的溝通

　　在拿到視覺稿和需求單之后，我們需要了解整個活動的流程。有的時候，設(shè)計師并不會把每個頁面的動畫效果做成視頻，而是用口述的方式和工程師進行溝通。這樣就需要工程師結(jié)合活動頁流程和設(shè)計稿之后，自己先構(gòu)思一些動效再去同產(chǎn)品以及設(shè)計溝通，這樣交流的效率才會比較高。

　　動畫新手有的時候會天馬行空想到一些奇怪的效果，可能會不符合整體設(shè)計風格，可能會違反現(xiàn)實物理規(guī)律，有自己的想法，還要和產(chǎn)品設(shè)計確認。比如這個頁面：

　　一開始是做成了先出現(xiàn)手電筒，再出現(xiàn)光，在我的設(shè)想中剛開始手電筒上不會有那層黃綠色的光。后來經(jīng)設(shè)計師提醒：如果完全沒有光源，也應(yīng)該看不到手電筒。才改成了現(xiàn)在的方案：燈光閃兩下：物理定律什么的，我才記不清了呢T T。

　　P.S. 做動畫的時候銘記動效原則(騰訊精品文!超多干貨的UI界面動效設(shè)計指南)，基本上動畫的效果不會跑偏。

　　具體實現(xiàn)

　　仔細想想，這個活動頁面并沒有用到什么高深技巧，基本上是用 position 定位和 CSS3 動畫完成的。不過在寫頁面之前，還是有不少擔心的：

　　1、頁面兼容怎么做

　　按照 iPhone6 的尺寸確定元素的位置，然后用 zoom 或者 transform: scale(x) 拉伸頁面或者拉伸元素。在實際開發(fā)的時候，我一度對這兩個屬性的用法產(chǎn)生混淆，所以作些了研究，稍后會詳細說說這兩個屬性。

　　2、3D 變化效果怎么實現(xiàn)

　　大家應(yīng)該早就聽說過或者使用過 perspective 和 perspective-origin 這兩個屬性了，雖然教程和分享都看過不少，但真正寫起來還是有一些摸不著頭腦，各種搜索關(guān)于 3D 動畫的解釋之后我認為原理大概是這樣的：

　　簡單粗暴地說，請想象你是站在上圖中的紅點位置，你與物體間的距離是 perspective，眼睛的位置是 perspective-origin。好了，現(xiàn)在站定位置，去看這個物體，想象物體投影在某個平面上的效果(這里的平面就是我們的顯示屏)，這就是 3D 投影的結(jié)果。

　　關(guān)于 perspective-origin，可以看看這個demo。

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。