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

　　前言

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

　　與設計師的溝通

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

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

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

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

　　具體實現

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

　　1、頁面兼容怎么做

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

　　2、3D 變化效果怎么實現

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

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

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