感谢你为199CASE提供优秀作品
案例链接:
推荐者微信号:
案例说明:

H5 动画页面适配全解析,又是适配!!!

2018-03-27 722

H5 动画页面适配全解析,又是适配!!!-营销策划-199case

在经历了2015年 H5 的大爆发之后,H5 动画页的开发能力几乎成了每个前端重构开发组的标配。

面对主流机型和数不胜数非主流机型大小各异的屏幕尺寸,如何做到完美适配成了个问题。

从初期朋友圈广告 H5的框架搭建,到现今微信游戏平台级运营活动的完整流程开发,这个过程中探索积累出了一套较为成熟的适配方案,已运用到逾30个 H5 动画页中。

1.移动端常规页面和动画页面的特点对比

常规页面:

如上图所示,常规页面具有以下特点

  • 屏幕越大能显示的内容越多

  • 滑动后能连续显示更多内容直到页面最底部

  • 内容和布局有条理有可重复性(列表)

  • 控件 UI 间的位置没有关联性

  • 边距保持不变,控件 UI 大小不变

对这些页面进行适配,一般只需要设置 viewpoint 同时跟桌面端页面一样使用 CSS 中的各种属性进行布局即可,其余的交给浏览器处理。如果对不同尺寸屏幕有特殊要求,则可采用响应式布局,根据媒体查询设置特殊样式。

动画页面:

如上图所示,与常规页面相比较,动画页面具有以下特点

  • 无论屏幕大小,同一场景在每一块屏幕上显示的内容基本相同

  • 当前场景下页面所有内容都展现在屏幕上,没有被遮挡的部分,无需滑动查看

  • 页面元素以大量不同的图片素材为主

  • 元素间具有关联性(图片的表意属性,位置关系,动画效果)

  • 不同尺寸屏幕下,页面内容进行了缩放

基于以上特点,如果使用常规页面的适配方案来处理动画页面,无疑需要为每一种屏幕尺寸写一套样式,工作量相当之大;如果对整个页面进行缩放,确实只需要一套样式,无论是定位还是动画效果都会对应缩放,故而也不存在错位的问题,然而这种方案难以保证主要内容和动画效果在每一个屏幕上都能完美(完整)显示。

如图中所示,根据元素的分类,对主体部分(蓝色区域)和边缘部分(红色区域边界)以及背景进行不同的缩放方案,能够在完美适配的基础上保证代码的最优化

2.动画页面元素的分类

无论动画页面的整体切换结构逻辑是怎样的,对于当前场景而言,页面层次主要分为以下三类:

  • 背景:页面的最底层,需要充满整个屏幕,即使被裁减也不影响页面效果

  • 主体区域:页面的主要内容展示区,其内元素都相对于这个区域定位;该区域中的内容不可被裁减,在任意屏幕中都要完整显示

  • 边缘元素:跟主体元素相比较,更靠近边缘,且相对于屏幕定位

如下图所示:

各个层次元素之间不要有位置相关性或交互关联

3.各类元素适配方案

在说到适配方案之前,需要明确几点

  • 使用 transform: scale 进行缩放。初期尝试使用 zoom,然而放大后会出现毛边,同时存在性能问题,所以 transform: scale是现今DOM方式下更好的缩放方式

  • 基准尺寸,亦即设计时目标屏幕尺寸,示例中为 iPhone 5 下微信 webview 尺寸 (320 x 504),设计稿则为该尺寸宽高的两倍(640 x 1008)

现今微信游戏品宣活动基准尺寸已修订为 iPhone 6 下微信webview 的尺寸(375 x 603),设计稿则为该尺寸宽高的两倍(750 x 1206)

3.1 背景

  • 若背景为CSS 可操控的颜色或渐变色,直接填满屏幕

  • 或背景为纹理类型,使用可首尾相接的小纹理图片重复铺满屏幕

  • 若背景为单张大图,则用图片充满屏幕

3.2 主体区域

  • 为了方便缩放和定位,主体区域默认为基准尺寸,主体元素的位置与设计稿一一对应

  • 只有基于主体区域定位的元素才属于主体元素,与元素在动画过程中是否会超出主体区域无关

  • 主体区域只为缩放服务,与元素显示范围无关

  • 默认在屏幕上居中缩放

注:代码已经更新到 iPhone 6 的缩放逻辑

注:样式中并未对容器进行 overflow:hidden 的设置,亦即超出容器范围的内容仍然正常显示,但定位和缩放的基准仍然为主体区域

写好主体区域样式之后,面临的问题是,缩放的数值应该是多少。

如上图所示,主体区域如果要完全显示,要么缩放到宽度跟屏幕相同,要么缩放到高度跟屏幕相同,而这取决于屏幕比标准尺寸“宽”还是比标准尺寸“长”。

此处的 common.eleScale 即为主体区域的缩放数值

则通用的缩放脚本函数:

3.3 边缘元素

  • 边缘元素一般为音乐控制图标或者操作指引或者与主体无关但又必须完整展示的内容

  • 处于屏幕边角的固定位置,必须基于屏幕定位。如元素分类图中的欧莱雅商标和下方的翻页箭头,无论在任何尺寸屏幕中,她们所处的位置都是一定的

对于这类元素,缩放的方案有两种:

  • 单个元素缩放:更改元素的变换原点,基于变换后的原点缩放元素

    但某些边缘元素,例如音乐操控按钮,自身的动画效果(旋转)会有跟缩放冲突(或者覆盖)的情况发生。这个时候可以通过给动画元素添加一级父元素,对父元素进行定位和缩放,而动画元素保持自身效果不变的方法来解决该问题。

  • 多个边缘元素缩放:将多个元素包含在同一容器中,改变元素的变换原点,对容器进行缩放。

    事实上,供缩放使用的父级容器不需要完全包裹住边缘元素,方便定位即可

如上图所示:黄色区域可视为包裹边缘元素的容器,该容器的样式如下所示:

4.各类型H5 适配方案

4.1 单屏模式

单屏模式常见于纯展示类H5 ,无论使用何种交互方式,切换的部分总是本屏的(同)一部分;或者页面的内容都以一整屏为单位切换,每一屏之间没有页面元素的关联。

如下图所示,上一列切换镜中内容,下一列切换整屏

该模式的H5 页面,按照三类元素的适配方法,每一屏各自适配即可。

4.2 屏幕移动模式

  • 主动移动

当前屏幕中显示的只是页面内容的一部分,通过各种交互方式(移动设备,滑动等等),显示页面的其余部分。例如:

此处的背景为一张地图,通过左右滑动展现全貌,地图上可点击的地点为动画元素,且在地图上位置一定,亦即,地点要跟地图背景同步移动。由于在标准尺寸中,地图是宽度超出屏幕范围,所以,这里以标准下地图的尺寸为缩放容器尺寸,各个动效地点基于该容器定位,缩放时保证容器高度等同于屏幕高度,缩放值为 hScale

同理,若是高度超出屏幕范围,缩放时保证容器宽度等同于屏幕宽度,缩放值为 wScale
若两者都超过,则可使用 common.bgScale作为缩放值

  • 自动移动

页面不以屏为单位分隔,而是有关联的线性连续播放的内容,具有连续重复的元素。例如:

上一列为竖直方向连续运动,下一列为水平方向连续运动

连续运动部分仍旧是包裹在一个容器中,若是高度超出屏幕范围,缩放时保证容器宽度等同于屏幕宽度,缩放值为 wScale;若是宽度超出屏幕范围,缩放时保证容器高度等同于屏幕高度,缩放值为 hScale

非全屏幕运动的部分,遵循单屏适配方案。

5. 总结

H5 的页面逻辑和形式多种多样,一个页面中可能同时包含多种模式,以上提出的适配方案不可能满足所有需求,还需要具体项目灵活实行。但只要设置好基准尺寸,基于主体区域定位,对容器进行缩放,遵循基础三类元素的适配思路,就能解决大部分 H5 动画页面的适配问题。

来源:腾讯优测


转载请标注来源“199CASE,数字营销案例共享平台”并保留页面标题和地址

 相关推荐

  • 活动运营:如何策划出一场...

  • 你可能学了假流程图,三步...

  • MG动画制作案例:如何防...

 推荐