腦內映像館H5：你不知道的滴滴科技
眾所周知，中國的交通問題是一個世界級難題。
但是，這個難題既是挑戰，也是機會。
滴滴便抓住了這個機會，經過過去五年的高速發展，現在已經成為全球最大的一站式出行平臺。在2017年的戰略布局中，更是一直在踐行“共享出行數據、共建智慧交通”，并且，不斷在用層出不窮的“黑科技”解決這個世界難題。
那么，滴滴科技具體都有哪些、都是些什么呢？
為了讓普通用戶都能更清晰、更直觀地了解，鯨夢受滴滴邀請，制作了這支腦洞大開的H5——《腦內映像館》。
下面，為大家來揭開《腦內映像館》的制作始末和創作秘密。
一、什么是“腦內映像館”
顧名思義，你可以理解為這是一個展覽腦內秘密的博物館，這里陳列了很多名人，古今中外應有盡有。
Loading 頁面是一個不斷旋轉的木偶人頭，彌漫著一股詭異的氣息。
H5 的主體分為兩大塊：
一是腦內映像館，里面有6個名人大腦可供選擇，每一個名人對應一種科技。
二是滴滴智慧大腦，集中展示介紹這6大科技。
Loading 頁加載完之后，我們就來到了“腦內映像館”的大門，門口還有兩個呆萌的守門人。他倆惶恐不安，悄悄進行腦內對話，原來是怕客人打開館內的腦袋，秘密被發現。
點擊門口的紅色帷帳進入之后，有幾個不停旋轉的名人人頭等待挑選，他們分別是——雍正皇帝、阿爾法狗、哥倫布、印度人、發明家、唐代地理學家賈耽，任君挑選。
任意選擇一個人物之后，他的大腦就被打開了，跳出一個與這個人物相匹配的腦內動畫。細細一看，這些腦內動畫還在微微浮動，輕輕搖晃你的手機，還會驚奇地發現：動畫會隨著手機的運動而運動。
注意注意，這里運用了陀螺儀技術，增強了動畫的立體感和層次感，也增加了觀看的趣味性。
接著，我們就鉆進他的腦洞里看一看，到底有什么秘密吧。
溫馨提醒：橫屏觀看效果更佳。
每一個秘密，都是一個滴滴科技。這里嵌入的是6支動畫短片（由滴滴提供）。分別是：
雍正——滴滴大數據；阿爾法狗——機器學習；哥倫布——智能規劃路線。
印度人——智能拼車；發明家——潮汐車道；賈耽——智慧誘導屏。
當這些全部看完之后，我們就穿越到現代的滴滴智慧大腦里了，這里面又用文字詳細地介紹了6大科技——滴滴大數據、機器學習、智能規劃路線、智能拼車、潮汐車道、智慧誘導屏。
二、你可能沒注意到的細節
到這里，整個 H5 就結束了，檢驗一下你的細心程度，下面這3個細節你注意到了嗎？
1、在觀看腦內秘密短片的過程中，你可以有兩個選擇，一個是“關掉”按鈕，關掉之后，你可以返回去重新選擇一個腦袋；旁邊還有個“下一個”按鈕，你就可以直接觀看下一個腦內秘密短片了。
2、看完一個秘密短片后，便會直接跳到與之對應的科技介紹。比如，“雍正的大腦”跳轉到“滴滴大數據”。同時，這是一個雙行道，你也可以通過“去看看別的大腦”按鈕返回到雍正的界面，然后再去選擇別的大腦。
3、除了一個西域風情的背景音樂之外，每一個互動的地方，我們還設置了不同的細節音效，比如門口的“管他呢”、選腦袋時的“下一個”按鈕，劃開大腦的“手指”處等。
三、再來說說幾個技術處理
如果你不是技術宅，也不是程序員，可能對 H5 里運用的技術不太了解，讓我來給你淺顯地說明一下。
在長達一個月的制作過程中，我們的 H5 技術團隊提供的程序方案也經歷了各種嘗試，甚至是推翻性重改。最終呈現給我們的就是一個風格詭異、畫面流暢、聲音和諧的腦內世界。值得一說的是我們對聲音文件、圖片請求、資源加載等的處理，主要是以下三個方面：
1、聲音方面：由于無法進行正常地預加載，將會導致音效無法精準契合時間點。但是，如果沒有加載頁面，那么觀眾就無法提前熟悉我們的場景設定，也就不能愉快地到腦內映像館里自由參觀了。為了解決這個問題，我們對 aac 的聲音文件做了一個 base 64碼的轉碼處理。
2、圖片請求：這支H5中包含了大量的圖片，為了使觀看更為流暢，我們將圖片資源轉換為JS資源，從而將圖片的請求數量從近2000個壓縮到了100多個；同時，也將原始的超過100 M 的資源包壓縮到了不到60 M 。
3、資源加載：資源加載是按需加載，就是在合理的時間加載合適的資源，如圖片、音頻等，讓觀眾更快地觀看到第一頁的內容。
掃描二維碼，進腦內映像館逛逛！
（數英網APP用戶需點擊放大二維碼， 長按識別）
“腦內映像館”系列海報：
1.
哥倫布勇闖新大陸
走一條又對又好的路，到底有多難？
2.
清宮秘史之雍正帝
信息量再大，如今也不在話下。
3.
三蹦子大鬧寶萊塢
拼車不開掛，全是技術含量。
4.
人類智慧捍衛の終局
路網可不是19X19，這次是誰棋高一籌？
項目信息
專業評分
專業評分已截止
評論
評論
推薦評論
全部評論（2條）