一、硬件背景(重要)

易观智库的一个报告指出，2013年中国移动互联网网民规模达6.52亿，其中70.1%的用户使用安卓手机，26.1%的用户使用苹果手机。

高收入网民中，有一半以上都是用IOS系统，这个比重在低收入群体中只占17.71%。中低收入网民多使用安卓系统的手机，占比分别为66.67%和76.09%。

先提出中国移动互联网网民结构是为了让大家在开始项目构思的时候，就要清楚面对的群体是什么，在项目的进展中遇到问题时，结合时间和效果，能够有所抉择。

这个问题很重要，就像我们在PC网页提出并且已经被广泛接受的“优雅降级”原则：在Google Chrome、Firefox、Safari、QQ浏览器极速模式等浏览器下，利用新技术(HTML5、CSS3、Javas cript等)给用户创造更多新鲜的体验。但是IE6、IE7、老系统下的QQ浏览器兼容模式等浏览器，就只能查看到普通的没特效的网页。

这个问题在移动端的展现只有过之而无不及。如果说IE6是PC浏览器的蛀虫，那安卓低端机就是手机浏览器的蛀虫。

安卓手机配置和系统可谓千千万种，CPU跟网页展示效果卡不卡息息相关，安卓系统版本跟网页基础呈现也息息相关(例如安卓2.0不兼容CSS3的圆角属性border-radius等)。(CPU中文意思是处理器，手机反应快慢，卡不卡，都跟CPU息息相关。现在市面上低端机定义是CPU频率800M以下，800M至1.5G属于中端机，高端机就是双核1G以上的手机。)

在理解这个问题的前提下，进行手机移动网页构思及重构的时候，就会有针对性的进行取舍，使得项目得到最大化的效率。

下面将会以我们近期制作的比较出色的手机专题网页作为案例，来告诉亲爱的大家，我们前端能做什么，希望可以对今后的创意参考有所帮助。

二、项目欣赏

1、TGA移动游戏官网

TGA城市拉力赛

2、UP+邀请函

3、天天酷跑里约进击版

三、技术创意点

一般在制作强交互、多动画效果的网页前，建议产品、设计、前端一起开会探讨实现细节。同时要求设计师有很良好的手机网页设计习惯和一定思路的展现效果，以及要求产品有很大的包容心、懂得取舍。

1、技术点：CSS3动画

适用范围：相互联系又相互独立的元素

设备要求：中高端手机

会发现UP+邀请函里用的最多的就是动画效果了，其实都是用CSS3写成的。

CSS3动画可以理解为一个元素的a状态，让它以逐帧展示的方式变成b状态。基本的变形有scale(缩放)、translate(位移)、rotate(旋转)、skew(倾斜)等，再加上color(颜色)、opacity(透明度)等，利用transition(转换)和animation(动画)加上延时效果，动画就出来了。听着晕吧?看看下面的例子。

① 独立元素间的互动

这块动画并不是前期就想好的。在制作过程中，发现每页的元素进入动画都差不多，这样用户容易感觉无聊而没有兴趣往下翻页。

为了增加末页的触达率，需要每翻一页都给用户带来一个信息：下面的内容会不一样的哦，请继续往下翻。

“我是玩家”这一屏的小元素都跟游戏有关系，英雄联盟的Q版盖伦，游戏玩家必备手柄，让他们互动起来。

手柄按常规方式进场(旋转+缩放+透明度)，盖伦也按照常规方式进场(位移+透明度)，但是让盖伦的位移轨迹跟手柄有少许重叠，就造成两者相撞的效果。手柄被撞需要有反馈，就被弹开了一下(位移)。

② 单元素自我呈现

看到这一屏设计稿的时候，真的不知道从何下手，常规动画效果上面的页面都使用了，这屏的元素还不多，如何不无聊?初期的想法是让小三角从圆里蹦出来(缩放+位移+透明度)，跟首屏呼应。可是只有一个小元素蹦出来，略显单薄。换了个方向思考，小三角可以自我呈现啊。

利用它的形状和方向，模仿风筝或者飞机的动效，给予一个非直线运动轨迹，最终呈现效果就出来了(缩放+位移+旋转+透明度)。

③ 3D变换

这个在最开始讨论的时候产品就说了需要有门被打开的动效。实现方法很多，最常规的是利用图片帧的方式，多张不同状态的门的图片进行切换，造成门在逐渐打开的效果。

优点是能制作各种动效，缺点是增加图片的数量，对页面加载速度造成压力(更多可以查看下面的sprite动画介绍)。好在这扇门是一个纯色矩形色块，可以利用CSS3的3D变换(旋转3D)，做成门往里面打开的效果。

如下图右一的rotateY，把旋转的中心线定为门的左侧即可。

CSS3的变换属性不算多，但是把不一样的参数结合起来，就成了不一样的展现效果。如果大家在开始项目前都有这么些概念和认识，也许不需要前端参与前期讨论都可以很顺的把流程走下来，提升效率。

2、技术点：Sprite动画

适用范围：单独形象有多帧动画

设备要求：无

Sprite动画的想法来自传统的动画行业，多张图在一定时间内切换，形成视觉上的动态效果。Sprite动画特别适合多细节的逐帧动画展示，但是对图片的要求很高，需要先生成每帧的图片，如下图。这张图片压缩之后都还有119K大小，成本是很高的。

本来酷跑里约版几乎每页的小角色都有sprite动画的，文件加起来有1.5M。在PC网页里，几M都是可理解的，但在手机，几百K都已经是致命的了(在中国国情下)。

所以在上线第二天，紧急处理网页，只留下审判女王的动画，访问延时从16秒直线下降到6秒。所以如果想在项目里应用sprite动画，需要仔细斟酌。