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

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

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

——哦？我剛做出一個(gè)這樣的H5。

——Seriously？！

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

▲淘寶H5原版

▲淘寶H5致敬版

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

相似度：95%

你也要玩玩嗎？過(guò)程簡(jiǎn)單得可怕，只有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)出時(shí)，越靠后層的圖片寬度（W）要越大。

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

（3）用iH5做全景運(yùn)動(dòng)

▲用iH5設(shè)置交互

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

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

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

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

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

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

[注]半徑=周長(zhǎng)/2π，相減可推測(cè)不同層的間距，并判斷觀察點(diǎn)的合適位置。

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

因?yàn)槟７鲁鰜?lái)的H5太像了，為避免侵權(quán)不敢發(fā)出來(lái)給大家看。你自己試試吧？