前几天有个设计师好朋友问我：“老板看到一个不错的H5，要我们参考一下它的形式，但是它是怎么做的呢？”

    或许大家在平时工作时经常遇到这个问题，微信H5现在在各种活动中都有很大的作用，而且有很大的需求，但是很多公司营销活动策划得时间节点非常的紧张，本来想静下心来好好设计设计，但是根本没那个时间，而且前期调研和后期改改改又是一堆时间，耗不起，还不如参考一个不错的已经上线的案例，然后换一种视觉形式来表达（当然，想做精品的朋友们就可以无视了，这里主要讲的是快速工作的方法，毕竟下了线，回到三次元，很多人都是乙方狗。)

    但是问题来了，很多专注于视觉的设计师们并不了解代码，虽然我经常跟小伙伴们安利“设计师的左右旁系技能都得抓好（左代码，右动效）”，但是你懂的，连平面都没时间好好修了，哪还有那么多时间捣鼓这些，所以，今天我会简单粗暴地跟小伙伴们讲一下最简单的前端小技巧，即便是不会代码，也不用再去问前端“这个效果是怎么实现的？我该怎么给你图？”之类的问题，把创意的主动权拿在自己手里。

    作为一个设计师，最常患上的职业病就是，在大街上看到海报就脑海里把素材分层了，看到电影院海报上牛逼的字体特效脑海里图层样式都搭了一遍了，幸好，H5时代给各位病友带来最好的地方就是，随便打开一个H5，他们的素材就已经暴露无遗了，在哪里？就在你的浏览器里，如果你不会看，那么接下来我就来讲讲怎么“前端扒稿”。

    我们来看这个案例，请用微信扫一扫打开（这个案例真的是眼前一亮，所以没忍住想要研究研究，原作者要是觉得本文会有困扰可以直接跟我联系）

请使用微信扫码

网页地址如下：http://wximg.gtimg.com/wxp/moment/4Jn95hEDl/html/index.html?from=singlemessage&isappinstalled=0

    看完效果以后，首先你需要装好测试神器--chrome浏览器，其实其他浏览器的开发者工具在测试网页上都各有各的优点，不过个人感觉是chrome最顺手了，而且对于移动端的测试chrome就更为重要了。

    那么先把网址输入进去，然后按F12,就是开发者工具，就会进入到如下界面：

    如果没有出现左边这种移动端预览模式，可以点击这个按钮

    默认的设置不一定是正常比例的，需要在设备尺寸这里选择iphone5，然后按F5刷新一下，就可以进入扒稿模式了。

    有两个工具需要讲解一下，一个是代码定位的这个功能，激活这个功能以后，用鼠标回去网页里面点击元素，就能找到它的那一行代码，具体的引用和参数都会在右边显示，这是前端的基本技能，在大型网站里需要研究某部分的原理或素材的时候就可使用以这个工具，能快速的找到那张图片。

    那么第二个就是咱们今天的主角--Network面板，这里会按照网页的显示顺序来展示当前网页所引用的所有资源，设计师朋友们最用得上的就是MP3和图片了，点击红圈部分，然后所有本页面用到的资源图就会在下面红框内显示了，就可以通过分析资源图来了解页面的制作原理，但是遇到swf或者视频之类的就只能GG了，不过为了容量尽可能的小，大部分H5就算有视频特效，也是会转成序列帧来用的，所以大部分酷炫的网页都能分析出来，这还是可以放心的。

    基本操作已经讲完了，下面我来针对这个案例来做几步实例讲解

    首先看到的是地球转动的loading动画，这个其实就是个序列帧，在资源里面可以很清晰得看出来

    看文章不直观，想直观一定要自己试试哦，这里就是用视频转的一套序列帧

    再往下是从地球到房间的过场，这里用了两张图片再结合代码放大，就可以做出看起来像是穿梭进房间的效果，这两张资源图能看出来。

    继续就是主体部分的房间，各种细节的小动画从资源里可以明显地看出，是基于一张底图，然后在上面用png和序列帧还有代码定位来做出二态与多态的小动画，然后文字部分就是用字体也好，用图片也好，这个在代码里面都能看得到，具体代码截图就不截图了，简单做了个示意图如下

    以上就是研究与分析H5微网站的方法，同样的道理，如果看到有兴趣的电脑端网页动效，同样是可以用开发者工具来扒开看的，只是如果不是移动端就不一定非得用chrome了，其他第三方浏览器也可以。

    另外，还是建议小伙伴们学习一下ae，或者是一些简单的动画基础知识，会对H5的各种动画效果有更好的理解层面的帮助，但是咱们设计师主要的任务还是视觉，先保证视觉的情况下再去挖动效，毕竟前端们也是会做动画的，如果你们双方对动画的理解都足够深，就能减少很多沟通成本，能做出更好的效果来。

    如果你们有时候会争议某个效果到底是代码做的还是视频（序列帧）做的，扒稿去吧~