如何快速實現(xiàn)淘寶造物節(jié)H5的720°偽VR全景特效。

——前陣子淘寶H5很火，朋友圈被刷了好幾天屏。

——我知道，是造物節(jié)的《ZAO》！它不是一般的720度全景，有偽3D的VR效果。你能上下、左右滑動看到不同視角的畫面，還能玩重力感應(yīng)。對了那些動漫人物，動起來是分前后的。聽說淘寶請外包團隊，花了30萬。

——哦？我剛做出一個這樣的H5。

——Seriously？！

我是認(rèn)真的，對比如下：

▲淘寶H5原版

▲淘寶H5致敬版

事情來由是這樣的，前兩天H5制作工具iH5.cn一下子放出3個全景組件，720度VR、重力感應(yīng)、頁面交互，各種功能1個不落。于是我就屁顛屁顛扒了淘寶造物節(jié)H5的素材開始做，結(jié)果竟然給我搗弄出來了……動態(tài)效果如下：

相似度：95%

你也要玩玩嗎？過程簡單得可怕，只有3步——

（1）準(zhǔn)備全景素材

▲淘寶H5的圖片

A、1張首尾相連的全景圖，當(dāng)背景；

B、堆疊在全景圖上的人或物件的PNG圖，當(dāng)前景。

為方便演示，這里直接扒淘寶造物節(jié)80張切好的圖，拼合成不同的層。上面半透明的背景是20張切片合成的，前景大概照著淘寶H5的位置放，共分成3層（NO.1最靠前）。

（2）用Photoshop切圖

▲用Photoshop切圖

A、把不同層的圖片各豎切成N份，然后導(dǎo)出；

B、導(dǎo)出時，越靠后層的圖片寬度（W）要越大。

不會切圖勞煩百度，我這里把1張背景、3張前景分別切20塊導(dǎo)出為PNG。切的份數(shù)越多，三維效果就越平滑，但圖片也會隨著變大容易卡。

（3）用iH5做全景運動

▲用iH5設(shè)置交互

A、新建全景容器，下面放4個全景背景組；

B、把切好的分層切片分別拖到對應(yīng)的全景背景組里。

比如你要放背景層圖片，就保持全景背景組1選中，把20張切片拖到頁面里就行。見證奇跡的時刻到了！以下幾張圖比較高能，是拖好圖調(diào)試的效果，強烈建議有WIFI的人點開：

▲用iH5分別調(diào)試水平轉(zhuǎn)角、垂直仰角、觀察點大小的效果

看完上面圖片你應(yīng)該也懂了，每個全景組就是把切片按順序圍成圓柱。

那剛才給前后層圖片設(shè)不一樣的寬度，用處是？寬度越小，圍成圓的周長就越小，當(dāng)觀察點在圓的中心，就會感覺這一層離得越近、移動得越快——VR的立體效果就這么來的。

[注]半徑=周長/2π，相減可推測不同層的間距，并判斷觀察點的合適位置。

如果你對點擊彈出華晨宇的新歌介紹、H5上方飄著一個造物節(jié)LOGO、滑動頁面畫面會伸縮什么的感興趣，直接去官網(wǎng)找教學(xué)視頻吧。加全景和調(diào)試其實很快，30分鐘不到，主要時間都花在處理淘寶那些素材了……扒人家原圖重新拼合構(gòu)圖再切開很費事啊，還是原創(chuàng)好。

因為模仿出來的H5太像了，為避免侵權(quán)不敢發(fā)出來給大家看。你自己試試吧？