网易的爆款H5,手把手教你做!

原创文章 分类: 教程 版权:
9925 247 105 36
2017-06-07
96.3
亚虎娱乐平台777推荐

最近网易的露脸真是越来越频繁,动不动就用H5支配微信朋友圈,让我们防不胜防。

 

特别是前阵子推出的「网易新闻丨各有态度」,短短一天就被100多万人打开,简直刷新了大家对H5的认知,不信你看——


Image title


你会看到它长得很像APP,有分类标签和可下滑刷新的列表,又有以假乱真的新闻频道。不认真看,还以为进了网易新闻的官网呢。离谱的是,居然不用下载安装...

 

对于这种形态的H5,业内有一个专业名词——Web APP

 

这类即开即用网页小程序现在可谓是相当炙手可热,微信小程序,谷歌的支持免安装应用,都可以说是Web APP。


或许未来它会火得一塌糊涂?提前学会制作,说不定能抢在风口前分一杯羹!

 

接下来,以3.0版 iH5.cn 为创作工具,以「网易新闻丨各有态度」为复现案例,为大家详细分析这种H5的交互实现方法。在详细讲教程前,先看看复现的效果——


Image title


PC端打开:http://5f630a50018f.vt.iamh5.cn/v3/idea/tK5Voiu

如在PC端打开,需按F12进入开发者工具,再刷新,才能模拟手机界面的显示效果~


一、解剖「网易新闻丨各有态度」

 

亲自体验一番的话,可以很直观地将这个H5划分为两个层级,分别是初始打开页以及滑动页。其中,滑动页有三个滑动节点,大致将整个内容页分为三部分:


Image title


除了用滑动时间轴,想要完整复现「网易新闻|各有态度」类的Web APP,最关键的在于设计动态变化的内容,也就是这个H5的文章展示部分。

 

这块的复现需要运用iH5 3.0版工具的新功能,主要是相对定位容器、数据单元、数据表这三个组件。

 

因为目前他们的3.0版还处在内测期,所以这些功能需要先激活账号才能使用,如果想玩的朋友,可以私聊我,我手上还有几个空余的内测码哈~


如果你想自食其力也行,我从他们官网扒来了发内测码的H5,你自己拿:


Image title


屏住呼吸,接下来是完整的复现教程!


二、可上下滑动的长页面

 

1.视差+遮罩效果的初始页

Image title

初始页的两个交互细节挺有意思的,文字在淡入显示的同时,背景图在慢慢往外延伸,营造出一种颇有视觉前后对比的视差效果。

 

(1)文字淡入

 

点击左侧的“文本”组件,分4行排好,接着给4个文本添加“淡入”的动效。

 

然后分别修改这4个动效的“启用延时”,依次是0S、1S、2S、3S,同时都打开“开始前隐藏”,目的是为了让这4个动效能够依次淡入。

Image title

特别地,3.0版工具支持编辑动效,如果你觉得淡入的效果不够完美,你可以点击编辑动效,在时间轴下自行调整。

 

(2)背景图往外延伸

 

规律性的变化可以用“时间轴”功能。在页面中添加一个大概5S的时间轴,上传背景图,然后为其添加轨迹,时间轴首尾设置关键帧即可。

 

这里给新手提个醒,设置关键帧的时候需要先选中关键帧,再调整X/Y坐标、宽高。


Image title

所以首帧按舞台大小顶格设置,尾帧先将宽高等比放大5倍,然后拖动调整至合适的位置就可以实现从中间往外延伸的效果了。

 

最后打开自动播放即可。

 

2.三个滑动节点

 

(1)会自动暂停的滑动时间轴

Image title

点击左侧的“滑动时间轴”控件,在工作区拖拽出一片区域,就能创建可滑动的区域。

 

因为这个H5是全屏滑动,因此我们需要将滑动时间轴调整为全屏,顶格左上角堆砌坐标(0,0),尺寸推荐640*1040px。

 

紧接着,选中滑动时间轴,在右侧找到“时间节点”控件,为滑动时间轴添加三个节点,标记的时间分别是0S、2S、4S,并打开“暂停点”功能。


时间节点是一个虚拟的节点,它类似水龙头的开关阀,当我们滑动至暂停点时,它会自动暂停,你需要再滑动它才会继续播。

 

至于两个暂停点之间的自动跳转,打开滑动时间轴的“自动跳转控制点”即可。如果想让跳转过程更快,可以修改它后面的“时长”。推荐数值0~1,数值越小,跳转越快。



(2)搭建整体框架

 

这个H5的整体框架如上图,屏幕外的内容,是暂停点之间滑动控制出现/消失的。比如说,当我们往上滑的时候,节点2的内容会从屏幕外出现;往下滑,节点2的内容会反向消失。


Image title


因为滑动时间轴可以剪切,屏幕外的素材会被自动剪切隐藏,因此无需担心屏幕外的内容会影响体验。


三、可左右滑动的局部

Image title

从原案例中,当我们向下滑到节点2时,会出现一个可以左右滑动的局部素材,而且左右滑动的素材是循环的,这个该怎么做呢?

 

理论上可以再加滑动时间轴,但多条滑动时间轴会导致轨迹复杂混乱,不利于初学者操作。

 

因此我们换个角度,用时间轴+透明按钮来控制这左右滑动的局部。


(1)用透明按钮控制时间轴

 

在编辑区域下拉拽去一个合适大小的透明按钮。

 

这个透明按钮需要跟随透明按钮的第二个滑动节点,从屏幕外进入屏幕内。

 

可左右滑动的素材数有8个,因此需要新增一个时长为8S的时间轴,时长=素材数(N)。

Image title

为了方便管理,可以把素材分别放进三个容器,成为时间轴的子对象,调整好坐标位置。


这样做是为了让三组素材能够受同一滑动操作控制,效果同步。

 

需要特别注意的是,文字和图片的素材,都需要一一对应。那么,如何用透明按钮控制时间轴,且让他们循环?


(2)循环播放的原理把握

 

透明按钮的事件具备向左/向右滑的触发条件,所以我们以此判断手指动作,触发时间轴的播放。

 

如果想让素材循环,需要具备两个条件:

 

A.时间轴能够正向&反向播放

B.素材首尾相连

 

正向&反向播放好办,用事件控制左滑=正向播放,右滑=反向播放即可。

 

至于素材首尾相连,需要注意什么?

Image title


上面这张图模拟出循环的含义,手机框即表示你能看到的区域,框外的即表示待轮播的素材。

 

首先你会亚虎娱乐下载官网屏幕外准备着一组一模一样的素材,素材间存在相互取代位置的关系,无论正/反向播放,在保证首尾帧坐标一样的前提下,就能调整属性达到循环效果——

 

A.为每个素材添加轨迹,时间每隔1S,位移一次;


B.每个节点的位置需要相互取代,比如a素材的坐标为(X,Y),那么b素材取代a的位置时,坐标也为(X,Y);


C.如此类推,c素材取代b位置时,坐标即为b位移前的坐标。

 

完成轨迹操作后,为时间轴的每一秒添加时间标记(共8个时间标记),打开暂停点即可。


四、会自动排版的底层文章(重点)

 

在原H5里,最后的文章会保持固定的板式,往下拖动会刷新获取新的内容,本质上是Flex网页布局设计,这是怎么做的呢?


Image title


需要用到iH5 3.0的新功能,主要是相对定位容器、数据单元、数据表。

 

(1)相辅相成的仨功能

 

对前端有一定了解的同学应该不陌生,它本质上是一个排版容器,可以配合着绝对定位容器、表格、数据单元、数据表等一系列功能来使用。

 

在页面下新建相对容器,它的属性是这面这样的:


Image title

它更像是一个印刷机,借助它可以自动完成排版,不用像旧版那样一个个去设置位置。

 

而辅助用的数据单元,就像是刷子,在它下面创建数据模板,它就能自动生成N个版式一模一样的内容。所以图片、文本等内容通常放在数据单元下。

 

充当油墨角色的是数据表,我们事先将所有图片素材、文本都上传到数据表中,由数据单元上的图片、文本绑定数据来源,即可批量自动生成了。

 

(2)相对定位容器的大小含义

 

相对定位容器没有固定的宽高,只有百分比,它会根据父对象的大小而自动覆盖。比如在页面下添加相对定位容器,那么它会自动以100%覆盖舞台。

 

因此我们需要借助一个容器,调整合适大小后,添加相对定位容器作为容器的子对象,此时它的尺寸就是容器的大小。


Image title


仔细观察原案例,不难需要预设的版式包括一张图片、一段文字、一张固定的底图。


明白这一串原理,下面就是调整参数和上传素材了。


(3)制作版式

 

在相对定位容器下新增一个数据单元,数据单元是虚拟的容器,它不能直接被选中。

 

因此它的位置需要根据实际调整:

Image title

调位置的时候,大家可以先给数据单元设置一个任意背景颜色,这样能更直观地控制大小和位置。

 

紧接着,我们在数据单元下添加一个空白的图片、空白的文本、固定的白色底图,并将白色底图置于底层,调整这三个元素的位置,效果如下图所示:


Image title

(4)在数据表中上传数据

 

正如上文所说,图片和文本都来自一个数据表,把内容按分类上传即可。

 

特别需要注意的是,因为案例中素材分了几个类别,所以我们在上传的时候需要做分类标记,这样才能输出被标记的准确内容。


Image title


为什么偏偏选用数据表来装载数据呢,数据库不可以吗?

 

A 数据体量足够大时,数据表支持后台调换数据顺序


B 数据表支持批量删除数据,更有利于数据更新。

 

特别是类似网易这个H5,或者产品展示型H5,数据体量超过100个,使用数据表会更适合。

 

(2)绑定数据,自动排版

 

在数据上传完之后,我们回到相对定位容器的图片和文本,在属性栏中选择数据来源,点击数据表后分别选中图片、文本。

Image title

(6)不同分类的数据输出

 

原案例中,数据是根据滑动来输出的,比如当前显示的是“家居”,会输出“家居”分类的数据,左右滑动后,数据会根据分类而刷新。

 

上面的步骤中,分类轮播的时间轴已经设置了8个时间标记,每个标记对应一个分类,因此我们可以用标记来触发数据输出。

 

做法是分别选中时间标记,分别添加事件,对应着去给相对定位容器创建数据单元:

Image title

事件的属性设置如上图,因为输出需要以分类作为筛选条件,所以要先点击数据单元,弹出输出条件框后选择该分类数据的输出,分类=分类名称。

 

由于是在当前页面筛选数据需要从数据的头部重新筛选输出,所以“从头获取”、“刷新页面”需要开启。

 

做好之后的效果如下——


Image title

(仅用于教学,所以数据表的数据是乱填的,不要介意哈)


最后的温馨提示:

 

(1)时间轴/滑动时间轴的实际长度是可调整的,当实际时长>原始时长时,播放速率变大,反之变小


(2)容器是个好功能,能充当中转站的角色,同类型的素材、功能可以放在容器下管理;


(3)滑动时间轴需要打开剪切,当素材处在舞台外时,不打开剪切用PC预览时,会把舞台外的素材显示出来,体验不好;


(4)数据单元的属性栏上,可以修改“更新行数”的值,这个值相当于一次刷新的数据数。


(5)在数据表上传数据后,记得保存,记得保存,记得保存,重要的事说三遍。

 

最后的最后,我还搜罗到设计师「永恒」用相对定位容器做的一个酷炫的购物页面Demo,还兼容移动端和PC端,感兴趣的可以瞅瞅——


Image title

▲移动端扫它


PC端点这里打开:http://821b071f41bc.vt.iamh5.cn/v3/idea/DuhWO5i


是不是赶脚很牛X?

 

电商网站、个人作品主页、个人博客、企业微官网统统没问题,相对定位容器帮你自动排版。


你也能做!还不赶紧动手?





尼姑拉丝赵四

世界大奇,保持好奇心,才有乐趣。H5爱好者。

1909粉丝/8关注

原创小生
3个小时150万UV!网易的童年 H5刷屏了!视觉逼格指南:几何抽象风格神器

尼姑拉丝赵四

尼姑拉丝赵四

世界大奇,保持好奇心,才有乐趣。H5爱好者。

原创小生

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2017 UI.CN