如何做一個讓人聞風喪膽的HTML5頁面

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

　　前言

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

　　與設計師的溝通

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

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

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

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

　　具體實現

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

　　1、頁面兼容怎麼做

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

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

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

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

　　關於 perspective-origin，可以看看這個demo。

　　說了這麼多，在實際運用中，我還是找了一個生成器。

　　得到的效果大概是這樣的：

　　想要重點說一下磁帶的實現，主要牽涉到的圖片資源是下面這幾個：

　　磁帶被分成了3個部分，磁帶底部，磁帶封面和磁帶。其中封面和磁帶是正視圖，需要使用 3D 旋轉，讓這兩個元素“躺下去”，而且為了保證這三個元素之間不會因為屏幕的縮放，出現錯位的問題，需要保證磁帶封面和磁帶的定位是基於磁帶底部的。其實磁帶上還有兩片蓋子，不知道大家有沒有注意到。其實這個蓋子是左右對稱且中心對稱的，所以完全可以只用一張圖片完成這樣的效果，用 transform: scale(-1, 1); 和transform: scale(1, -1); 實現。

　　3、動畫如何才有代入感？

　　這個活動頁面我個人最喜歡的地方就是星星砸下去的動畫，感覺所有的戲份都在它身上。開始的設想只是星星砸下去，感謝在制作過程中，經驗豐富的同事所提的建議：星星砸下去的時候要有灰塵濺起或者火星四濺的效果。後來和設計商量，最後用了灰塵濺起的效果。不過本來還想做，星星背後的鐵板應該要有震動的效果。由於時間關系，震動的效果有點不好添加，所以放棄了，這一點感覺有一些遺憾。可能頁面新手的經驗不夠，很多動畫的效果因為有限的想象力所以不太完善。這個時候和身邊經驗豐富的同事請教是很有效的方法。同時，一定要多看 B 站拓寬視野才行哦。

　　踩到了一些坑

　　頁面布局並不復雜。前文也提到，基本上使用 position: absolute; 來實現的，不過遇到了一些問題就有了以下總結：

　　1、殺雞就不要用牛刀，能又快又好解決問題才最重要

　　上圖是首頁的截圖，頁面加載之後應該可以看到“膽量測試”下面的藍色線條有一個動畫。

　　故事是這樣的，自從 SVG 帝王小啪帶著神器 svgartisan 降臨，做頁面的時候總想加上一點 SVG。然而這個藍色線條上有特效，所以用 PS 導出 SVG 後還要做二次處理才能還原設計稿上的效果，而且 SVG 的代碼你懂得，它總是有點長。其實有個簡單粗暴的方法：改變藍色線條的圖片寬度，雖然這個方法從性能上看並不好，但考慮到這個頁面也只有這裡發生了重繪，所以還是用圖片+寬度控制來實現了。

　　不知道大家會不會為了某一種技術而去做某一件事情，但其實完成那件事情才是真正的目的，卻因為那個技術而耽誤了不少進度，這樣就有點進入了炫技的誤區。

　　2、答應我，偽元素上就不要做動畫了

　　偽元素真的是神一樣的存在，一個標簽自帶兩個兒子，不知道為什麼就有種金閃閃的感覺。但是偽元素上的動畫真的很坑，年少無知，頁面都寫完了，發現在 iOS 上美如畫的動畫效果，到了小米和魅族上就……

　　Android 上坑多，不要一次應用太多新技術。比如在魅族上用 flexbox 布局，就要加上 display: -webkit-box。還有一個教訓就是，頁面果然應該做一個測試一個啊QAQ。因為這個項目是重構和前端並行開發的……把偽元素改成實際 DOM 元素的時候，是懷著一顆對不起前台的心的。

　　3、請寫好注釋

　　與UI工程師對接的前台同學需要看注釋才知道什麼時候要加什麼class，想到剛剛開始接需求的時候，從來不寫注釋…真是對不起前台同學T T現在我個人的注釋如上圖所示。也看過組裡不同同事的注釋風格，大同小異，主體思想就是“在XX時候添加XX class”這樣，和對接的同學約定好就可以~

　　zoom 和 transform: scale(x); 的使用

　　我將會在接下來詳細談到前文提到的 zoom 和 transform: scale(x); 問題。

　　為什麼要使用縮放

　　現在不管是活動頁的設計稿還是產品頁的設計稿，逐漸以 375×667 的 iPhone6 為基礎。但是實際生活裡，這些頁面是會出現在細細長長的 iPhone5、480px 高度的 iPhone4 還有大屏幕的 iPhone 6+，更不要說在三星小米魅族一加等等等等尺寸都不知道怎麼辦才好的 Android 系列上打開會是什麼gui。

　　拿這次的活動頁面設計稿來說，與用戶產生交互的按鈕在頁面篇底