如何做出“Levis最酷夏天”這樣的互動廣告

 　　最近Levi's“換”醒你的夏天國內首個Cinemagraphic互動廣告很火。

　　什麼?

　　你沒聽說過?

　　不知道沒關系，旋轉門在這裡：Levi's“換”醒你的夏天 國內首個Cinemagraphic互動廣告

　　http://www.digitaling.com/projects/14516.html

　　那麼如何才能做出這樣一款高大上的互動廣告呢?

　　小編就從H5制作的角度來談一談，這樣的廣告究竟使用了哪些技術。

　　Canvas技術

　　Canvas是一種可以將整個H5當作photoshop畫布的一種處理辦法。在之前我們常見的互動廣告中都有用到。

　　比如大眾點評的“我們之間就一個字”

　　Canvas把H5網頁當作畫布來使用，可以在上面畫出位圖，畫出AE特效，實現各種神奇的效果。

　　Sprite動畫技術

　　Sprite是將多張圖片逐桢顯示，呈現出動畫效果的一種技術。Cinemagraph效果的核心實現，正是采用了這一技術。

　　以Leves這個廣告為例，圖片中女孩頭發飄動的效果，就是用了不同的桢，反復在畫布上繪制。

　　那sprite動畫相比傳統的gif動畫,有哪些優勢呢?

　　1.sprite動畫可以控制畫布，只改變局部區域，因此動畫的尺寸更小，更節省流量，加載速度更快。在同樣加載速度的情況下，畫面可以更精致。

　　2.sprite動畫可以更方便的增加交互功能，比如滑動手指，畫面跟隨手指運動。

　　觸摸路徑檢測

　　在推動女孩蕩秋千的時候，用戶被提示要畫一條圓弧，才能完成推動的操作。

　　同樣在揚起水龍頭的時候，也需要畫一條弧線。

　　這裡H5需要檢測用戶是否畫了一條圓弧。