技術(shù)詳解：如何做出“Levi's最酷夏天”這樣的互動(dòng)廣告
最近Levi's“換”醒你的夏天國內(nèi)首個(gè)Cinemagraphic互動(dòng)廣告很火。
什么？
你沒聽說過？
不知道沒關(guān)系，旋轉(zhuǎn)門在這里：Levi's“換”醒你的夏天 國內(nèi)首個(gè)Cinemagraphic互動(dòng)廣告
那么如何才能做出這樣一款高大上的互動(dòng)廣告呢？
小編就從H5制作的角度來談一談，這樣的廣告究竟使用了哪些技術(shù)。
Canvas技術(shù)
Canvas是一種可以將整個(gè)H5當(dāng)作photoshop畫布的一種處理辦法。在之前我們常見的互動(dòng)廣告中都有用到。比如大眾點(diǎn)評的“我們之間就一個(gè)字”
Canvas把H5網(wǎng)頁當(dāng)作畫布來使用，可以在上面畫出位圖，畫出AE特效，實(shí)現(xiàn)各種神奇的效果。
Sprite動(dòng)畫技術(shù)
Sprite是將多張圖片逐楨顯示，呈現(xiàn)出動(dòng)畫效果的一種技術(shù)。Cinemagraph效果的核心實(shí)現(xiàn)，正是采用了這一技術(shù)。
以Leves這個(gè)廣告為例，圖片中女孩頭發(fā)飄動(dòng)的效果，就是用了不同的楨，反復(fù)在畫布上繪制。
那sprite動(dòng)畫相比傳統(tǒng)的gif動(dòng)畫,有哪些優(yōu)勢呢？
1.sprite動(dòng)畫可以控制畫布，只改變局部區(qū)域，因此動(dòng)畫的尺寸更小，更節(jié)省流量，加載速度更快。在同樣加載速度的情況下，畫面可以更精致。
2.sprite動(dòng)畫可以更方便的增加交互功能，比如滑動(dòng)手指，畫面跟隨手指運(yùn)動(dòng)。
觸摸路徑檢測
在推動(dòng)女孩蕩秋千的時(shí)候，用戶被提示要畫一條圓弧，才能完成推動(dòng)的操作。
同樣在揚(yáng)起水龍頭的時(shí)候，也需要畫一條弧線。
這里H5需要檢測用戶是否畫了一條圓弧。
掃描二維碼關(guān)注更多H5資訊
本文系作者授權(quán)數(shù)英發(fā)表，內(nèi)容為作者獨(dú)立觀點(diǎn)，不代表數(shù)英立場。
轉(zhuǎn)載請?jiān)谖恼麻_頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
轉(zhuǎn)載請?jiān)谖恼麻_頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
本文系作者授權(quán)數(shù)英發(fā)表，內(nèi)容為作者獨(dú)立觀點(diǎn)，不代表數(shù)英立場。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本內(nèi)容為作者獨(dú)立觀點(diǎn)，不代表數(shù)英立場。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
本文系數(shù)英原創(chuàng)，未經(jīng)允許不得轉(zhuǎn)載。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
相關(guān)推薦
-
![[下載] H5手機(jī)移動(dòng)項(xiàng)目，3月份截屏下載 ——設(shè)計(jì)師資源 04]()
[下載] H5手機(jī)移動(dòng)項(xiàng)目，3月份截屏下載 ——設(shè)計(jì)師資源 04
-
![H5君：其實(shí)你的H5可以活更久]()
H5君：其實(shí)你的H5可以活更久
-
![知識(shí)解答：客戶常說的“互動(dòng)性不夠強(qiáng)”是什么意思？]()
知識(shí)解答：客戶常說的“互動(dòng)性不夠強(qiáng)”是什么意思？
-
![H5+時(shí)代：如何做一個(gè)有溫度的H5？]()
H5+時(shí)代：如何做一個(gè)有溫度的H5？
-
![H5還能活多久？—— W創(chuàng)始人3水 主題演講PPT曝光]()
H5還能活多久？—— W創(chuàng)始人3水 主題演講PPT曝光
-
![H5 技術(shù)開發(fā)指南 —— 不怕沒有技術(shù)團(tuán)隊(duì)，不怕沒有預(yù)算]()
H5 技術(shù)開發(fā)指南 —— 不怕沒有技術(shù)團(tuán)隊(duì)，不怕沒有預(yù)算
-
![10 個(gè)令人吃驚的 H5 活動(dòng)數(shù)據(jù)結(jié)論]()
10 個(gè)令人吃驚的 H5 活動(dòng)數(shù)據(jù)結(jié)論
-
![過目不忘 | 總結(jié)當(dāng)前H5品牌傳播案例]()
過目不忘 | 總結(jié)當(dāng)前H5品牌傳播案例
-
![那些刷屏的 H5 新年簽，給品牌的營銷啟示]()
那些刷屏的 H5 新年簽，給品牌的營銷啟示
![[下載] H5手機(jī)移動(dòng)項(xiàng)目，3月份截屏下載 ——設(shè)計(jì)師資源 04](https://file.digitaling.com/eImg/cover/20150603/20150603222245_65981.jpg)
評論
評論
推薦評論
全部評論（2條）