技术详解：如何做出“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条）