h5制作圖表教程 怎么做特別牛的720°全景H5?
怎么做特別牛的720°全景H5?怎么制作全景的效果根本不古怪,我們制作只不需要借助意派Epub360專業(yè)H5工具中的全景容器組件,延后打算好2:1比例的背景素材圖,聽從具體的要求直接添加進(jìn)來就可以了。
怎么做特別牛的720°全景H5?
怎么制作全景的效果根本不古怪,我們制作只不需要借助意派Epub360專業(yè)H5工具中的全景容器組件,延后打算好2:1比例的背景素材圖,聽從具體的要求直接添加進(jìn)來就可以了。
一、案例效果演示
二、組件結(jié)構(gòu)
全景容器組件我們簡單點(diǎn)將其結(jié)構(gòu)拆為三個層級結(jié)構(gòu):
1.最外層元素/背景
2.中層元素/背景
3.最內(nèi)層元素(交互元素儲放層,是由:交互層)
最外層元素/背景是由全景容器組件最外層的圖片元素層混編,在手機(jī)上觀看時(shí),相距我們的視線最遠(yuǎn);
中層元素/背景是由全景容器組件中層的圖片元素層橫列在手機(jī)上在線觀看時(shí),而言最外層背景,相距視線較近,正處于最內(nèi)層與最外層中間。
最內(nèi)層元素,在手機(jī)上再看時(shí),而言最外層背景,距離視線最近;就像我們用一個layer頁面來做這一層,可以在這一層做一些交互能觸發(fā)的設(shè)置。
這個可以建議使用最外層背景(2:1圖)另外全景容器本身的背景,也可不使用中層背景(2:1圖),也也可以就用頁面充當(dāng)全景容器的背景(大多數(shù)滿屏尺寸740X1136分辨率72dpi或是畫布)。
小技巧:層次之間在滑動屏幕時(shí),會才能產(chǎn)生錯位視覺差效果,做的層次一定,視覺差效果越豐富地。
三、應(yīng)用場景
全景容器組件,是可以將長寬比例為2:1的畫面,以Y軸為中心軸,使畫面頭尾相連,180度旋轉(zhuǎn)查看,目前并無該組件案例供大家建議參考。
《這些聲音你聽過嗎?》
《烏蘭察布第二屆冰雪藝術(shù)節(jié)》
三、素材準(zhǔn)備
文末附件直接下載素材,非商用,僅供學(xué)習(xí)交流自學(xué)不使用。
1.如打算讓最外層背景要知道,中層背景不能不能是JPG格式的,也可以是內(nèi)帶透明區(qū)域的PNG格式圖片;另,layer層內(nèi)不能可以放置尺寸比例為2:1的JPG格式大圖。
2.去相關(guān)尺寸規(guī)范。設(shè)置成的大背景尺寸比例為2:1(2000x1000px分辨率72dpi),所有的元素其他的四頭元素全是在PS中怎么設(shè)計(jì)好后逐房文件導(dǎo)入。注意一點(diǎn):PNG格式的圖片裁邊掉不是需要透明區(qū)域。大圖的尺寸因?yàn)橄鄬龃螅珣?yīng)該要壓制下大小,盡可能壓縮。
3.將所有的元素或者大圖在PS等設(shè)計(jì)軟件中結(jié)束。將元素在PS等設(shè)計(jì)軟件中設(shè)計(jì)排版完成后逐個文件導(dǎo)出PNG或JPG后,再本地上傳到Epub360編輯器設(shè)置中。PS中的設(shè)計(jì)示例如圖:
4.如果能能保證每個小的元素跟大背景的比例算正常即可解決,所有零散的PNG圖片都是放進(jìn)全景容器的layer層里。如圖:
也這個可以將多個小元素放進(jìn)一張PNG大圖(尺寸比例2:1)上文件導(dǎo)入,以及單獨(dú)的一層,放在旁邊中層背景或Layer層里,看個人的需求。
四、組件教程
都差不多用法
1.直接添加全景容器組件:初級組件——交互組件——全景容器。
2.點(diǎn)擊全景容器直接添加組件
3.直接點(diǎn)擊【建議使用中層背景圖片】和【建議使用外層背景圖片】的縮略圖,可以不修改成尺寸比例為2:1的圖片(2000x1000px分辨率72dpi),兩個背景層也這個可以不系統(tǒng)設(shè)置。
4.再點(diǎn)上圖中任意一層背景圖,會會顯示素材上傳的圖片界面,僅支持上傳的圖片JPG/PNG格式的圖片。
4.鼠標(biāo)雙擊Layer層設(shè)置,可直接直接切換到layer頁面中去添加或改素材。
5.然后點(diǎn)擊后進(jìn)入到到Layer中的排版效果如圖,再點(diǎn)左上角的小黑三角可以不切換回頁面。
交互層設(shè)置中。用戶最在乎的問題在全景容器中接受一些交互過程設(shè)置中,一般比較多那就是在Layer層(最內(nèi)層)中接受的。
為什么開近光燈儀表盤顯示示廓燈?
1、因?yàn)檫@款車沒有近光燈的標(biāo)識,不論你開小燈那就近光燈,儀表上亮的是這個示廓燈。儀表上的燈的標(biāo)識,另外遠(yuǎn)光燈,霧燈。。
2、你說的狀況是很正常了的,該車根本不會近光燈的儀表盤指示,在我們另外開啟近光燈的時(shí)候,內(nèi)部當(dāng)然沒顯示示寬燈,很多車型都這樣。。
3、算正常的,只不過近光燈在儀表盤上面是沒有提示標(biāo)志的,只不過大燈開啟了很難就看的到的。如果沒有是啟動遠(yuǎn)光之后,在儀表盤會亮遠(yuǎn)光的提示標(biāo)志。。
4、這個是很正常了的,遠(yuǎn)光是沒有顯示圖標(biāo)的,它只有一一個前后位置燈在內(nèi)大燈的標(biāo)志兩種。
5、你說的這種是很正常,畢竟近光燈在儀表盤上卻沒單獨(dú)的顯示標(biāo)志,只能遠(yuǎn)光燈和示寬燈,才能夠有相應(yīng)的標(biāo)志。