简介

连轴转的刷新，不断变向的页面转换，以及tap事件的周期性的延迟仅仅是现在移动web环境令人头疼事情的一小部分。开发者正试图尽可能的靠近原生应用，但却经常被各种兼容问题，系统复位，和僵化的框架打乱步调。

在这篇文章中，我们将讨论创建一个移动HTML 5 web app需要的最低限度的东西。主要观点是去除现在移动框架试图隐藏的隐含复杂性。你会看到一个简约方法（使用核心的HTML 5APIs）和使你能够写出自己的框架或给你现在在用的框架贡献代码的基本原则。

硬件加速

通常情况下，GPUs处理精细的3D建模或者CAD图表，但这种情况下，我们想要原始的制图(divs, 背景，下落式阴影的文字，图像等等...) 能通过GPU平滑地展现出来并且有流畅的动画。不幸的是，大多数前端开发者没有考虑动画处理的机制并将其装载在第三方框架，但是这些核心的CSS3特性应该被掩盖吗？让我来给你们一些关于为什么关心这件事是十分重要的理由：

1. 内存分配和计算压力- 如果你将所有元素都合成在DOM里，仅仅是为了硬件加速，在你的代码基础上继续工作的另一个人可能会想狠狠揍你一顿。

2. 电源消耗- 显然地，当硬件开始工作，电源也随之开始消耗。当进行移动端开发时，开发者开发移动应用必须要考虑设备多样化的约束。普遍流行的情况是浏览器开发商开始使其产品能适应多样的设备硬件。

3. 冲突- 我曾经历过小故障：将硬件加速应用到一部分能够加速的页面。值得确信的是如果你有重复的加速区域是非常重要的。

为了尽可能地使户交互平滑并且接近真实，我们必须使浏览器为我们工作。理想的情况是，我们想要移动设备的CPU建立初始化动画，然后使GPU仅仅负责动画处理过程中合成不同的层。这就是translate3d, scale3d, translateZ做的事- 他们给了动画元素到他们各自的层，因此允许设备能平滑渲染。如果想要了解更多加速合成，WebKit工作原理，Ariya Hidayat 在他的博客里提供了许多信息。

页面过渡

让我们看看开发移动WEB应用时最常用的三种用户交互方法：滑动、翻转、旋转效果。

你可以在这个链接查看代码的实际效果： (注意: 这个演示是为移动设备建立的，所以请启动模拟器，或者使用手机、平板电脑，或把你的浏览器窗口减小到约1024px或更小).

首先，我们将剖析滑动、翻转、旋转过渡，及如何使其加速。请注意每个动画是如何只需三、四行CSS和JavaScript即可实现的。

滑动

在这三种常用效果中最常用的是滑动，滑动页面变换模拟了移动应用的自然感觉。滑动转换用来向视图区域带来一个新的内容。

要实现滑动效果，首先我们要声明元素标签:

<div> <h1>Home Page</h1> </div> <div> <h1>Products Page</h1> </div> <div> <h1>About Page</h1> </div>

注意我们是如何让页面向左或向右演出的。本质上，它可以是任何方向，但水平是最常见的。

我们现在只需几行CSS就可以产生有硬件加速的动画。我们交换页面上的div元素的class时，动画就会实际发生。

.page { position: absolute; width: 100%; height: 100%; /*activate the GPU for compositing each page */ -webkit-transform: translate3d(0, 0, 0); }

translate3d(0,0,0)作为“银弹”方法而闻名。

当用户点击一个导航元素，我们执行下面的JavaScript来交换class。没有第三方框架被使用，这是纯JavaScript！

function getElement(id) { return document.getElementById(id); } function slideTo(id) { //1.) the page we are bringing into focus dictates how // the current page will exit. So let's see what classes // our incoming page is using. We know it will have stage[right|left|etc...] var classes = getElement(id).className.split(' '); //2.) decide if the incoming page is assigned to right or left // (-1 if no match) var stageType = classes.indexOf('stage-left'); //3.) on initial page load focusPage is null, so we need // to set the default page which we're currently seeing. if (FOCUS_PAGE == null) { // use home page FOCUS_PAGE = getElement('home-page'); } //4.) decide how this focused page should exit. if (stageType > 0) { FOCUS_PAGE.className = 'page transition stage-right'; } else { FOCUS_PAGE.className = 'page transition stage-left'; } //5. refresh/set the global variable FOCUS_PAGE = getElement(id); //6. Bring in the new page. FOCUS_PAGE.className = 'page transition stage-center'; }

stage-left或stage-right成为stage-center，会推动页面滑入视图中心。我们完全依靠CSS3完成繁重的工作。

.stage-left { left: -480px; } .stage-right { left: 480px; } .stage-center { top: 0; left: 0; }

接下来，让我们看看处理移动设备检测与适应的CSS。我们可以定位每种设备和每种分辨率(参考 )。我在演示中使用的只是几个简单的例子来覆盖移动设备上大多数的竖立和横放视图。这对应用每种设备本身的硬件加速功能也很有用。比如，因为Webkit的桌面版本加速了所有转换元素（不管是二维还是三维），所以在这个水平上建立媒体查询和排除加速很有意义。注意，在Android Froyo 2.2+以下，硬件加速技巧不会提供任何速度的改进。所有合成都是在软件内部实现的。

/* iOS/android phone landscape screen width*/ @media screen and (max-device-width: 480px) and (orientation:landscape) { .stage-left { left: -480px; } .stage-right { left: 480px; } .page { width: 480px; } } 翻转

在移动设备上，翻转实际上以把页面击飞（译者注：如果你熟悉棒球，很容易想像）而闻名。在这里我们用一些简单的 JavaScript 在iOS 和 Android (基于WebKit)设备上来处理这个事件。

在这个地址可查看实际执行效果

当处理触摸事件和转换效果时，你要做的第一件事就是获得元素当前位置的句柄。在WebKitCSSMatrix上可以看到更多信息。

function pageMove(event) { // get position after transform var curTransform = new WebKitCSSMatrix(window.getComputedStyle(page).webkitTransform); var pagePosition = curTransform.m41; }

由于我们为页面翻转使用的是CSS3的ease-out转换，usualelement.offsetleft不会工作。