最近被天猫年货节H5刷屏了。坊间传闻它和腾讯16年出品的火影H5很像，比拟如上。
然而实在一个是视频，一个是互动页面。
刚好这阵子iH5要预备年终报告，小伙伴排出60多页AI静态源素材，得做成一版H5。如果为素材一页页分组、导出身分层图、导入iH5、加动效，做起来得哭去世……
还好天猫这个刷屏H5涌现了！
好看、热门、而且实用（自动翻书的设计，能承载很多信息容量），以是险些在天猫刷屏的第二天我们就趁热打铁做出以下致敬版。
（报告H5链接：http://465048564698.ih5.cn/idea/iMYBC_H）
想学吗？接下来进入剧透韶光！
利用工具：www.iH5.cn（一个云端制作平台，功能强大）
（一）、弄几张图，透明的！
1、用于展示的镂空图（PNG）
图片要镂空！
实在便是去背景，比如上面是我们报告的原图，背景的留白都是透明的，因此才能在H5中看到前后播放的其他图片，制造出立体空间。
2、用于衔接的镂空图（PNG）
衔接的图片，须要在中央处完备镂空，才不会隐瞒住前后的展示图层，比如从上面天猫的案例后台可以看到，采纳的是中央全透明的形式。
把稳：导出为Web所用格式时，须要设为640×1040像素（刚好是手机上微信显示页面的标准尺寸），并建议采取PNG-8格式（更节省体积）、杂边“无”。
（二）来个走马灯殊效！
走马灯背后涉及两种旋转，一种是须要掌握图片平面上沿页面边缘进行y轴旋转，一种是立体上给人带来沿页面边缘进行y轴旋转的觉得，涉及视距变换。
需把稳在苹果设备上，图片如果有重叠会导致闪屏，以是须要对图层进行旋转角度的区分。
（1）新建韶光轴
注：为了方便编辑，报告H5每个轨迹的间隔设为1秒，但播放起来有点快，末了播放速率设为0.7倍。
（2）新建容器——新建容器——新建透明按钮——新建轨迹
大略地说，连续两次点击“容器”组件那个按钮，建立2层容器，用于旋转角度的区分。
然后新建一个透明按钮1，用于确保图片沿y轴旋转时，y轴以透明按钮1的中点为准。因此要掌握透明按钮1的“x坐标”（比如630）、“宽”（比如20），刚好能让它的中点处于H5的右边缘。
透明按钮1视距设为300，并为它新建轨迹（开始显示YES，结束显示NO），用于确保图片具备3D变换效果。
注：视距指以父工具的中央为旋转中央时，子工具3D翻转时的变形间隔，必须在3D旋转的父工具上设置。视距设置越大，3D透视效果越小。
（3）新建透明按钮——新建轨迹——拖入图片
再新建一个透明按钮2，也是用于确保图片沿y轴旋转、立体变换时，y轴以透明按钮2的中点为准。由于透明按钮1是透明按钮2的父工具，因此要掌握透明按钮2的“x坐标”为前者的负值（比如-630）、“宽”与前者同等（比如20），让它的中点与透明按钮1重合。
为透明按钮2新建轨迹，拖一张图片到透明按钮下面。这样一来，让透明按钮2沿y轴旋转，实在便是让图片沿右侧边缘旋转了。
注：沿y轴旋转，指以工具的垂直中央轴为旋转轴，进行3D透视旋转。上面的轨迹建议采取“贝塞尔曲线”选项，变换时会遵照快-慢-快的原则。
（4）为轨迹设置关键帧
分别选中透明按钮1、透明按钮2轨迹，为它们各添加以上3个参数的关键帧，并保持两个按钮3个关键帧的位置同等。
如果同组内关键帧的间隔设为1秒，后面添加新的关键帧比较节省韶光（只需选中关键帧，在帧位置的输入框内填写1、2、3类似的值就行）。
组与组之间间隔可设为0.5秒（即展示组和衔接组的韶光间隔）。
（5）多组图片的变革
以此类推，比如要做6个展示页面，就须要11个组（包括5个衔接的图片组）。
这时须要回到开头，复制第2个容器，粘贴在第1个容器上，就会有11个包含各种内容的二层容器。然后逐一为各层容器设置关键帧，更换图片就行。
（6）避免各组之间的层叠
末了，把所有展示组的顶层容器（相称于二层容器），“y轴旋转”这个参数设为1。
注：这样一来，所有衔接组的“y轴旋转”仍为0，就不会导致间隔的两组同时旋转时，两组之间重叠后产生闪屏。（这个问题听说只在苹果设备会涌现，一开始我也没把稳，后来多亏交互工程师Young跑来提醒。）
（三）滑动要智能！
旁边滑动的速率须要实时记录，并反响为播放速率，交互上的体验才会更真实。
此外，为避免一次性进行播放的图片太多，导致卡顿，最好进行分页播放，而不是一个页面播到底。
（1）新建变量
须要2个变量，一个输出向左滑动的速率（v1），一个输出向右滑动的速率（v2）。
（2）新建透明按钮——添加事宜
透明按钮的x、y坐标为0，宽、高和设备同等，确保挡住全体屏幕，然后须要的事宜如下：
上面的播放速率，$v10.0001+0.5，0.5表示的是最低的播放速率，可以根据实际滑动情形灵巧设置；0.0001，是由于比较快的速率可以高达4位数，这样赋值可以确保它不会一下子超过原定的播放速率（0.7）。
你，做出来了吗？
