技术详解:如何做出“Levi's最酷夏天”这样的互动广告

举报 2015-06-04

最近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) 后台授权,侵权必究。

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    DIGITALING
    登录后参与评论

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    800

    推荐评论

    全部评论(2条)