互动类h5制作教程免费（1天100万PV的网易爆款H5）
互动类h5制作教程免费（1天100万PV的网易爆款H5）1.视差 遮罩效果的初始页屏住呼吸，接下来是完整的复现教程！亲自体验一番的话，可以很直观地将这个H5划分为两个层级，分别是初始打开页以及滑动页。其中，滑动页有三个滑动节点，大致将整个内容页分为三部分：除了用滑动时间轴，想要完整复现「网易新闻|各有态度」类的Web APP，最关键的在于设计动态变化的内容，也就是这个H5的文章展示部分。这块的复现需要运用iH5 3.0版工具的新功能，主要是相对定位容器、数据单元、数据表这三个组件。
最近网易的露脸真是越来越频繁，动不动就用H5支配微信朋友圈，让我们防不胜防。
特别是前阵子推出的「网易新闻丨各有态度」，短短一天就被100多万人打开，简直刷新了大家对H5的认知，不信你看——
你会看到它长得很像APP，有分类标签和可下滑刷新的列表，又有以假乱真的新闻频道。不认真看，还以为进了网易新闻的官网呢。离谱的是，居然不用下载安装...
对于这种形态的H5，业内有一个专业名词——Web APP。
一、解剖「网易新闻丨各有态度」亲自体验一番的话，可以很直观地将这个H5划分为两个层级，分别是初始打开页以及滑动页。其中，滑动页有三个滑动节点，大致将整个内容页分为三部分：
除了用滑动时间轴，想要完整复现「网易新闻|各有态度」类的Web APP，最关键的在于设计动态变化的内容，也就是这个H5的文章展示部分。
这块的复现需要运用iH5 3.0版工具的新功能，主要是相对定位容器、数据单元、数据表这三个组件。
屏住呼吸，接下来是完整的复现教程！
二、可上下滑动的长页面1.视差 遮罩效果的初始页
初始页的两个交互细节挺有意思的，文字在淡入显示的同时，背景图在慢慢往外延伸，营造出一种颇有视觉前后对比的视差效果。
（1）文字淡入点击左侧的“文本”组件，分4行排好，接着给4个文本添加“淡入”的动效。
然后分别修改这4个动效的“启用延时”，依次是0S、1S、2S、3S，同时都打开“开始前隐藏”，目的是为了让这4个动效能够依次淡入。
特别地，3.0版工具支持编辑动效，如果你觉得淡入的效果不够完美，你可以点击编辑动效，在时间轴下自行调整。
（2）背景图往外延伸规律性的变化可以用“时间轴”功能。在页面中添加一个大概5S的时间轴，上传背景图，然后为其添加轨迹，时间轴首尾设置关键帧即可。
这里给新手提个醒，设置关键帧的时候需要先选中关键帧，再调整X/Y坐标、宽高。
所以首帧按舞台大小顶格设置，尾帧先将宽高等比放大5倍，然后拖动调整至合适的位置就可以实现从中间往外延伸的效果了。
最后打开自动播放即可。
2.三个滑动节点（1）会自动暂停的滑动时间轴
点击左侧的“滑动时间轴”控件，在工作区拖拽出一片区域，就能创建可滑动的区域。
因为这个H5是全屏滑动，因此我们需要将滑动时间轴调整为全屏，顶格左上角堆砌坐标（0，0），尺寸推荐640*1040px。
紧接着，选中滑动时间轴，在右侧找到“时间节点”控件，为滑动时间轴添加三个节点，标记的时间分别是0S、2S、4S，并打开“暂停点”功能。
时间节点是一个虚拟的节点，它类似水龙头的开关阀，当我们滑动至暂停点时，它会自动暂停，你需要再滑动它才会继续播。
至于两个暂停点之间的自动跳转，打开滑动时间轴的“自动跳转控制点”即可。如果想让跳转过程更快，可以修改它后面的“时长”。推荐数值0~1，数值越小，跳转越快。
（2）搭建整体框架
这个H5的整体框架如上图，屏幕外的内容，是暂停点之间滑动控制出现/消失的。比如说，当我们往上滑的时候，节点2的内容会从屏幕外出现；往下滑，节点2的内容会反向消失。
因为滑动时间轴可以剪切，因此无需担心屏幕外的内容会影响体验。
三、可左右滑动的局部
从原案例中，当我们向下滑到节点2时，会出现一个可以左右滑动的局部素材，而且左右滑动的素材是循环的，这个该怎么做呢？
理论上可以再加滑动时间轴，但多条滑动时间轴会导致轨迹复杂混乱，不利于初学者操作。
因此我们换个角度，用时间轴 透明按钮来控制这左右滑动的局部。
（1）用透明按钮控制时间轴在编辑区域下拉拽去一个合适大小的透明按钮。
这个透明按钮需要跟随透明按钮的第二个滑动节点，从屏幕外进入屏幕内。
可左右滑动的素材数有8个，因此需要新增一个时长为8S的时间轴，时长=素材数（N）。
为了方便管理，可以把素材分别放进三个容器，成为时间轴的子对象，调整好坐标位置。
这样做是为了让三组素材能够受同一滑动操作控制，效果同步。
需要特别注意的是，文字和图片的素材，都需要一一对应。那么，如何用透明按钮控制时间轴，且让他们循环？
（2）循环播放的原理把握透明按钮的事件具备向左/向右滑的触发条件，所以我们以此判断手指动作，触发时间轴的播放。
如果想让素材循环，需要具备两个条件：
A.时间轴能够正向&反向播放
B.素材首尾相连
正向&反向播放好办，用事件控制左滑=正向播放，右滑=反向播放即可。
至于素材首尾相连，需要注意什么？
上面这张图模拟出循环的含义，手机框即表示你能看到的区域，框外的即表示待轮播的素材。
首先你会发现屏幕外准备着一组一模一样的素材，素材间存在相互取代位置的关系，无论正/反向播放，在保证首尾帧坐标一样的前提下，就能调整属性达到循环效果——
A.为每个素材添加轨迹，时间每隔1S，位移一次；
B.每个节点的位置需要相互取代，比如a素材的坐标为（X Y），那么b素材取代a的位置时，坐标也为（X Y）；
C.如此类推，c素材取代b位置时，坐标即为b位移前的坐标。
完成轨迹操作后，为时间轴的每一秒添加时间标记（共8个时间标记），打开暂停点即可。
四、会自动排版的底层文章（重点）在原H5里，最后的文章会保持固定的板式，往下拖动会刷新获取新的内容，本质上是Flex网页布局设计，这是怎么做的呢？
需要用到iH5 3.0的新功能，主要是相对定位容器、数据单元、数据表。
（1）相辅相成的仨功能对前端有一定了解的同学应该不陌生，它本质上是一个排版容器，可以配合着绝对定位容器、表格、数据单元、数据表等一系列功能来使用。
在页面下新建相对容器，它的属性是这面这样的：
它更像是一个印刷机，借助它可以自动完成排版，不用像旧版那样一个个去设置位置。
而辅助用的数据单元，就像是刷子，在它下面创建数据模板，它就能自动生成N个版式一模一样的内容。所以图片、文本等内容通常放在数据单元下。
充当油墨角色的是数据表，我们事先将所有图片素材、文本都上传到数据表中，由数据单元上的图片、文本绑定数据来源，即可批量自动生成了。
（2）相对定位容器的大小含义相对定位容器没有固定的宽高，只有百分比，它会根据父对象的大小而自动覆盖。比如在页面下添加相对定位容器，那么它会自动以100%覆盖舞台。
因此我们需要借助一个容器，调整合适大小后，添加相对定位容器作为容器的子对象，此时它的尺寸就是容器的大小。
仔细观察原案例，不难需要预设的版式包括一张图片、一段文字、一张固定的底图。
明白这一串原理，下面就是调整参数和上传素材了。
（3）制作版式在相对定位容器下新增一个数据单元，数据单元是虚拟的容器，它不能直接被选中。
因此它的位置需要根据实际调整：
调位置的时候，大家可以先给数据单元设置一个任意背景颜色，这样能更直观地控制大小和位置。
紧接着，我们在数据单元下添加一个空白的图片、空白的文本、固定的白色底图，并将白色底图置于底层，调整这三个元素的位置，效果如下图所示：
正如上文所说，图片和文本都来自一个数据表，把内容按分类上传即可。
特别需要注意的是，因为案例中素材分了几个类别，所以我们在上传的时候需要做分类标记，这样才能输出被标记的准确内容。
为什么偏偏选用数据表来装载数据呢，数据库不可以吗？
A 数据体量足够大时，数据表支持后台调换数据顺序；
B 数据表支持批量删除数据，更有利于数据更新。
特别是类似网易这个H5，或者产品展示型H5，数据体量超过100个，使用数据表会更适合。
（2）绑定数据，自动排版在数据上传完之后，我们回到相对定位容器的图片和文本，在属性栏中选择数据来源，点击数据表后分别选中图片、文本。
原案例中，数据是根据滑动来输出的，比如当前显示的是“家居”，会输出“家居”分类的数据，左右滑动后，数据会根据分类而刷新。
上面的步骤中，分类轮播的时间轴已经设置了8个时间标记，每个标记对应一个分类，因此我们可以用标记来触发数据输出。
做法是分别选中时间标记，分别添加事件，对应着去给相对定位容器创建数据单元：
事件的属性设置如上图，因为输出需要以分类作为筛选条件，所以要先点击数据单元，弹出输出条件框后选择该分类数据的输出，分类=分类名称。
由于是在当前页面筛选数据需要从数据的头部重新筛选输出，所以“从头获取”、“刷新页面”需要开启。
做好之后的效果如下——
最后的温馨提示：
（1）时间轴/滑动时间轴的实际长度是可调整的，当实际时长＞原始时长时，播放速率变大，反之变小；
（2）容器是个好功能，能充当中转站的角色，同类型的素材、功能可以放在容器下管理；
（3）滑动时间轴需要打开剪切，当素材处在舞台外时，不打开剪切用PC预览时，会把舞台外的素材显示出来，体验不好；
（4）数据单元的属性栏上，可以修改更新行数，这个值相当于一次刷新的数据数。
（5）在数据表上传数据后，记得保存，记得保存，记得保存，重要的事说三遍。
