技術詳解：如何做出“Levi's最酷夏天”這樣的互動廣告
最近Levi's“換”醒你的夏天國內首個Cinemagraphic互動廣告很火。
什么？
你沒聽說過？
不知道沒關系，旋轉門在這里：Levi's“換”醒你的夏天 國內首個Cinemagraphic互動廣告
那么如何才能做出這樣一款高大上的互動廣告呢？
小編就從H5制作的角度來談一談，這樣的廣告究竟使用了哪些技術。
Canvas技術
Canvas是一種可以將整個H5當作photoshop畫布的一種處理辦法。在之前我們常見的互動廣告中都有用到。比如大眾點評的“我們之間就一個字”
Canvas把H5網頁當作畫布來使用，可以在上面畫出位圖，畫出AE特效，實現各種神奇的效果。
Sprite動畫技術
Sprite是將多張圖片逐楨顯示，呈現出動畫效果的一種技術。Cinemagraph效果的核心實現，正是采用了這一技術。
以Leves這個廣告為例，圖片中女孩頭發飄動的效果，就是用了不同的楨，反復在畫布上繪制。
那sprite動畫相比傳統的gif動畫,有哪些優勢呢？
1.sprite動畫可以控制畫布，只改變局部區域，因此動畫的尺寸更小，更節省流量，加載速度更快。在同樣加載速度的情況下，畫面可以更精致。
2.sprite動畫可以更方便的增加交互功能，比如滑動手指，畫面跟隨手指運動。
觸摸路徑檢測
在推動女孩蕩秋千的時候，用戶被提示要畫一條圓弧，才能完成推動的操作。
同樣在揚起水龍頭的時候，也需要畫一條弧線。
這里H5需要檢測用戶是否畫了一條圓弧。
掃描二維碼關注更多H5資訊
本文系作者授權數英發表，內容為作者獨立觀點，不代表數英立場。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
本文系作者授權數英發表，內容為作者獨立觀點，不代表數英立場。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本內容為作者獨立觀點，不代表數英立場。
本文禁止轉載，侵權必究。
本文禁止轉載，侵權必究。
本文系數英原創，未經允許不得轉載。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
![[下載] H5手機移動項目，3月份截屏下載 ——設計師資源 04](https://file.digitaling.com/eImg/cover/20150603/20150603222245_65981.jpg)
評論
評論
推薦評論
全部評論（2條）