网易哒哒H5(网易云的H5)

前阵子网易出现的越来越频繁，我们总是用H5称霸微信朋友圈，让我们防不胜防。
尤其是之前推出的“网易新闻有自己的态度”，短短一天就被100多万人打开，简直刷新了大家对H5的认知。不信你看——。
它看起来像一个应用程序，有分类标签，可以向下滑动和刷新的列表，以及真假参半的新闻频道。可笑的是不用下载安装。
对于这种形式的H5，业内有个技术术语叫——Web APP。
这种开箱即用的Web小程序现在还挺流行的。微信小程序和谷歌的免安装应用都可以称为web app。
学会做这样的H5，说不定风口前就能分到一杯羹呢！
接下来，以iH5.cn 3.0版本为创作工具，以“网易新闻态度不同”为反复出现的案例，详细分析了H5的互动实现方式。在详细讲教程之前，先看看复现的效果。
个人电脑公开赛：http://5f630a50018f.vt.iamh5.cn/v3/idea/tK5Voiu
如果在PC上打开，需要按F12进入开发者工具，然后刷新模拟手机界面的显示效果~
1.剖析“网易新闻自有态度”
如果你亲身体验，可以直观的把这个H5分为两个层次，即初始打开页面和滑动页面。其中，滑动页面有三个滑动节点，大致将整个内容页面分为三个部分：
除了使用滑动时间轴，最重要的是设计动态变化的内容，也就是这个H5的文章展示部分，才能完整的再现“网易新闻|各有各的态度”的Web APP。
这一块的重现需要用到IH5 3.0版工具的新功能，主要是容器、数据单元、数据表的相对定位。
第二，可以上下滑动的长页面
1.视差遮罩效果的初始页面
初始页面的两个交互细节相当有趣。文字淡入显示的同时，背景图像慢慢向外延伸，产生前后视觉对比的视差效果。
(1)文本淡入
点击左边的“文本”组件，将其排列成四行，然后给四个文本添加“淡入”效果。
然后分别修改这四个动态效果的“启用延迟”，依次为0、1S、2S、3S，同时开启“启动前隐藏”，这样这四个动态效果就可以依次淡入。
特别是3.0版工具支持编辑动态效果。如果觉得淡入效果不够完美，可以点击编辑动态效果，在时间轴下自行调整。
(2)背景图像向外延伸。
定期更改可以使用“时间线”功能。给页面添加一个5S左右的时间轴，上传背景图片，然后给它添加轨道。在时间轴的开始和结束处设置关键帧。
这是对新笔记本电脑的提醒。设置关键帧时，需要先选中关键帧，然后调整X/Y坐标、宽度和高度。
所以第一帧是根据舞台尺寸的顶帧设置的，最后一帧是长宽比放大5倍，然后拖动调整到合适的位置，达到从中间向外延伸的效果。
最后，打开自动播放。
2.三个滑动节点
(1)滑动时间轴，会自动暂停。
单击左侧的“滑动时间轴”控件，在工作区中拖放一个区域，创建一个可滑动区域。
因为这个H5是全屏滑动的，所以我们需要将滑动时间轴调整为全屏，坐标(0，0)堆叠在顶格的左上角，推荐尺寸为640*1040px。
然后，选中滑动时间轴，找到右侧的“时间节点”控件，在滑动时间轴上添加三个节点，分别标记0、2S、4S的时间，开启“暂停点”功能。
时间节点是一个虚拟节点，类似于水龙头的开关阀。当我们滑动到暂停点时，它会自动暂停，你需要再滑动一次才能继续播放。
至于两个暂停点之间的自动跳转，打开滑动时间轴的“自动跳转控制点”即可。如果你想让跳转过程更快，你可以在它之后修改“持续时间”。推荐值为0~1，值越小，跳转越快。
(2)构建整体框架。
H5整体框架如上图所示，屏外内容是暂停点之间滑动控件的出现/消失。例如，当我们向上滑动时，节点2的内容会出现在屏幕之外；向下，节点2的内容会反向消失。
因为滑动时间轴可以剪切，所以屏下素材会自动剪切隐藏，不用担心屏下内容会影响体验。
第三，可以左右滑动的部分
从原案例来看，当我们向下滑动到节点2时，会有一个可以左右滑动的局部材料，左右滑动的材料是圆形的。对此我们应该做些什么？
理论上可以增加一条滑动时间轴，但是多条滑动时间轴会导致轨迹复杂，不利于新手操作。
所以从另一个角度，我们用时间轴透明按钮来控制左右滑动部分。
(1)使用透明按钮控制时间轴。
在编辑区域下拉一个大小合适的透明按钮。
这个透明按钮需要跟随透明按钮的第二个滑动节点，从屏幕外进入屏幕。
有8个素材可以左右滑动，需要添加一个时长为8S的时间轴，时长=素材个数(n)。
为了方便管理，可以把素材放入三个容器，成为时间轴的子对象，调整坐标位置。
这样做是为了通过相同的滑动操作来控制三组材质，并且效果是同步的。
需要注意的是，文字和图片的素材需要一一对应。那么，如何用透明按钮控制时间轴，让它们循环往复呢？
(2)把握循环播放的原则。
透明按钮事件有左/右滑动的触发条件，所以我们可以判断手指动作，触发时间轴的回放。
如果你想让物质流通，你需要具备两个条件：
A.时间轴可以向前和向后播放。
B.这些材料首尾相连
反方向玩很容易。使用事件控制左滑动=向前播放，右滑动=向后播放。
至于材料的首尾连接，需要注意什么？
上图模拟了循环的含义。手机框代表你能看到的区域，框外的材料代表要旋转的材料。
首先，你会发现屏幕外准备了一组相同的素材，素材之间存在相互替换的位置关系。无论是向前播放还是向后播放，都可以在保证第一帧和第二帧坐标相同的前提下，调整属性达到3354的循环效果。
a、每种材料增加一条轨道，每1秒位移一次；
B.每个节点的位置需要互相替换。比如材料A的坐标是(X，Y)，那么当材料B代替A的位置时，坐标也是(X，Y)；
C.以此类推，当C材料替换B位置时，坐标为B位移前的坐标。
完成跟踪操作后，为时间轴的每一秒添加时间戳(共8个时间戳)，然后打开暂停点。
第四，会自动排版的底层文章(重点)
在原来的H5中，最后一篇文章会保持固定的布局，向下拖动会刷新得到新的内容，本质上是Flex的网页布局设计。这是怎么做到的？
需要iH5 3.0的新功能，主要是容器、数据单元、数据表的相对定位。
(1)三种功能相辅相成。
对前端有一定了解的同学应该比较熟悉。本质上是一个排版容器，可以配合绝对定位容器、表格、数据单元、数据表等一系列功能使用。
在页面下新建一个相对容器，其属性如下：
它更像一台印刷机，用它可以自动完成排版，不用像旧版那样一个一个地设定位置。
辅助数据单元就像画笔一样，在它下面创建一个数据模板，它可以自动生成N个相同格式的内容。所以图片，文字等。通常放在数据单元下面。
充当墨迹角色的是数据表。我们提前将所有图片资料和文字上传到数据表，数据单元上的图片和文字绑定数据源，可以批量自动生成。
(2)相对定位容器大小的意义
相对定位容器没有固定的wid
所以我们需要使用一个容器，调整合适的大小，然后添加相对定位容器作为容器的子对象，此时它的大小就是容器的大小。
仔细观察原案，不难需要包括一张图片、一段文字、一张固定底图在内的预设版面。
理解了这一串原理，下面就是调整参数和上传素材了。
(3)制作版面
在相对定位容器下添加新的数据单元。数据单元是虚拟容器，不能直接选择。
因此，其位置需要根据实际情况进行调整：
调整位置时，可以先为数据单元设置任意背景色，这样可以更直观地控制大小和位置。
然后，我们在数据单元下添加一张空白图片、空白文字和固定的白色底图，将白色底图放置在底层，调整这三个元素的位置。效果如下图所示：
(4)上传数据表中的数据。
如上所述，图片和文字都来自一个数据表。按类别上传内容即可。
需要注意的是，由于案件中的素材分为几类，我们在上传时需要做分类标记，以便输出标记准确的内容。
为什么选择数据表加载数据？数据库不能用吗？
a当数据量足够大时，数据表支持后台改变数据顺序；
b数据表支持批量删除数据，更有利于数据更新。
尤其是类似网易的H5，或者产品展示的H5，100多的数据量，更适合用数据表。
(2)绑定数据，自动排版
数据上传后，我们回到容器的图文相对定位，在属性栏选择数据源，点击数据表分别选择图文。
(6)不同类别的数据输出。
在最初的情况下，数据是根据滑动输出的。例如，如果当前显示是“家”，则输出“家”的分类数据。左右滑动后，数据会根据分类进行刷新。
在上面的步骤中，分类转盘的时间轴已经设置了8个时间戳，每个时间戳对应一个分类，因此我们可以使用这些时间戳来触发数据输出。
方法是分别选择时间戳和添加事件，对应为相对定位容器创建数据单元：
事件的属性设置如上图所示。因为输出需要分类作为过滤条件，所以要先点击数据单元，弹出输出条件框，然后选择分类数据的输出。分类=分类名称。
因为过滤当前页面上的数据需要重新过滤数据头的输出，所以需要打开“从头开始”和“刷新页面”。
做了之后的效果如下：3354
最后一个温馨提示：
(1)时间轴/滑动时间轴的实际长度可以调整。当实际持续时间& gt原来的时长，播放速率变大，反之亦然；
(2)集装箱是一个很好的功能，可以起到中转站的作用，集装箱下可以管理同类型的物料和功能；
(3)滑动时间轴时，需要开启切割。素材在舞台之外的时候，如果不打开裁剪，用PC预览，舞台之外的素材就会显示出来，体验不好；
(4)在数据单元的属性栏上，可以修改“更新行数”的值，相当于一次刷新的数据数。
(5)数据表上传数据后，记得保存，记得保存，记得保存，重要的事情说三遍。
教程来源：UIChina @尼古拉斯赵四