提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
最近网易的露脸真是越来越频繁,动不动就用H5支配微信朋友圈,让我们防不胜防。
特别是前阵子推出的「网易新闻丨各有态度」,短短一天就被100多万人打开,简直刷新了大家对H5的认知,不信你看——
你会看到它长得很像APP,有分类标签和可下滑刷新的列表,又有以假乱真的新闻频道。不认真看,还以为进了网易新闻的官网呢。离谱的是,居然不用下载安装...
对于这种形态的H5,业内有一个专业名词——Web APP。
这类即开即用网页小程序现在可谓是相当炙手可热,微信小程序,谷歌的支持免安装应用,都可以说是Web APP。
或许未来它会火得一塌糊涂?提前学会制作,说不定能抢在风口前分一杯羹!
接下来,以3.0版 iH5.cn 为创作工具,以「网易新闻丨各有态度」为复现案例,为大家详细分析这种H5的交互实现方法。在详细讲教程前,先看看复现的效果——
PC端打开:http://5f630a50018f.vt.iamh5.cn/v3/idea/tK5Voiu
如在PC端打开,需按F12进入开发者工具,再刷新,才能模拟手机界面的显示效果~
一、解剖「网易新闻丨各有态度」
亲自体验一番的话,可以很直观地将这个H5划分为两个层级,分别是初始打开页以及滑动页。其中,滑动页有三个滑动节点,大致将整个内容页分为三部分:
除了用滑动时间轴,想要完整复现「网易新闻|各有态度」类的Web APP,最关键的在于设计动态变化的内容,也就是这个H5的文章展示部分。
这块的复现需要运用iH5 3.0版工具的新功能,主要是相对定位容器、数据单元、数据表这三个组件。
因为目前他们的3.0版还处在内测期,所以这些功能需要先激活账号才能使用,如果想玩的朋友,可以私聊我,我手上还有几个空余的内测码哈~
如果你想自食其力也行,我从他们官网扒来了发内测码的H5,你自己拿:
屏住呼吸,接下来是完整的复现教程!
二、可上下滑动的长页面
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)制作版式
在相对定位容器下新增一个数据单元,数据单元是虚拟的容器,它不能直接被选中。
因此它的位置需要根据实际调整:
调位置的时候,大家可以先给数据单元设置一个任意背景颜色,这样能更直观地控制大小和位置。
紧接着,我们在数据单元下添加一个空白的图片、空白的文本、固定的白色底图,并将白色底图置于底层,调整这三个元素的位置,效果如下图所示:
(4)在数据表中上传数据
正如上文所说,图片和文本都来自一个数据表,把内容按分类上传即可。
特别需要注意的是,因为案例中素材分了几个类别,所以我们在上传的时候需要做分类标记,这样才能输出被标记的准确内容。
为什么偏偏选用数据表来装载数据呢,数据库不可以吗?
A 数据体量足够大时,数据表支持后台调换数据顺序;
B 数据表支持批量删除数据,更有利于数据更新。
特别是类似网易这个H5,或者产品展示型H5,数据体量超过100个,使用数据表会更适合。
(2)绑定数据,自动排版
在数据上传完之后,我们回到相对定位容器的图片和文本,在属性栏中选择数据来源,点击数据表后分别选中图片、文本。
(6)不同分类的数据输出
原案例中,数据是根据滑动来输出的,比如当前显示的是“家居”,会输出“家居”分类的数据,左右滑动后,数据会根据分类而刷新。
上面的步骤中,分类轮播的时间轴已经设置了8个时间标记,每个标记对应一个分类,因此我们可以用标记来触发数据输出。
做法是分别选中时间标记,分别添加事件,对应着去给相对定位容器创建数据单元:
事件的属性设置如上图,因为输出需要以分类作为筛选条件,所以要先点击数据单元,弹出输出条件框后选择该分类数据的输出,分类=分类名称。
由于是在当前页面筛选数据需要从数据的头部重新筛选输出,所以“从头获取”、“刷新页面”需要开启。
做好之后的效果如下——
(仅用于教学,所以数据表的数据是乱填的,不要介意哈)
最后的温馨提示:
(1)时间轴/滑动时间轴的实际长度是可调整的,当实际时长>原始时长时,播放速率变大,反之变小;
(2)容器是个好功能,能充当中转站的角色,同类型的素材、功能可以放在容器下管理;
(3)滑动时间轴需要打开剪切,当素材处在舞台外时,不打开剪切用PC预览时,会把舞台外的素材显示出来,体验不好;
(4)数据单元的属性栏上,可以修改“更新行数”的值,这个值相当于一次刷新的数据数。
(5)在数据表上传数据后,记得保存,记得保存,记得保存,重要的事说三遍。
最后的最后,我还搜罗到设计师「永恒」用相对定位容器做的一个酷炫的购物页面Demo,还兼容移动端和PC端,感兴趣的可以瞅瞅——
▲移动端扫它
PC端点这里打开:http://821b071f41bc.vt.iamh5.cn/v3/idea/DuhWO5i
是不是赶脚很牛X?
电商网站、个人作品主页、个人博客、企业微官网统统没问题,相对定位容器帮你自动排版。
你也能做!还不赶紧动手?
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册