下一步我们要找出用户翻转的是哪个方向，并对事件（页面导航）设定一个发生的阈值。

if (pagePosition >= 0) { //moving current page to the right //so means we're flipping backwards if ((pagePosition > pageFlipThreshold) || (swipeTime < swipeThreshold)) { //user wants to go backward slideDirection = 'right'; } else { slideDirection = null; } } else { //current page is sliding to the left if ((swipeTime < swipeThreshold) || (pagePosition < pageFlipThreshold)) { //user wants to go forward slideDirection = 'left'; } else { slideDirection = null; } }

你会注意到我们测量击打时间是毫秒级的。这允许导航事件在用户快速点击屏幕来翻页时也会发生。

为了定位页面和当手指正触摸屏幕时使动画看起来自然，我们在每次事件触发后都使用CSS3转换。

function positionPage(end) { page.style.webkitTransform = 'translate3d('+ currentPos + 'px, 0, 0)'; if (end) { page.style.WebkitTransition = 'all .4s ease-out'; //page.style.WebkitTransition = 'all .4s cubic-bezier(0,.58,.58,1)' } else { page.style.WebkitTransition = 'all .2s ease-out'; } page.style.WebkitUserSelect = 'none'; }

我想玩弄一下三次曲线来让转换带有最好的自然感觉，但ease-out已经玩了这个花样。

最后，为让导航发生，我们必须调用我们之前在上一个演示里定义的slideTo()方法。

track.ontouchend = function(event) { pageMove(event); if (slideDirection == 'left') { slideTo('products-page'); } else if (slideDirection == 'right') { slideTo('home-page'); } } 旋转

接下来，让我们来看看在本演示使用的旋转动画。在任何时候，你可以旋转页面将看到180度旋转后反面的“联系人”菜单选项。 同样的，只需要几行CSS和一些JavaScript指定一个点击时的transition class。注：旋转过渡则无法正确的在大多数版本的Android上呈现，因为它缺乏3D CSS transform 的支持。不幸的是，Android提供了“侧手翻”页面旋转特性，来替代翻转。我们建议在android得到支持之前使用transition来进行翻转。

正面与背面的基本结构:

<div> ... </div> <div> <div> <h1>Contact Page</h1> </div> </div>

JavaScript:

function flip(id) { // get a handle on the flippable region var front = getElement('front'); var back = getElement('back'); // again, just a simple way to see what the state is var classes = front.className.split(' '); var flipped = classes.indexOf('flipped'); if (flipped >= 0) { // already flipped, so return to original front.className = 'normal'; back.className = 'flipped'; FLIPPED = false; } else { // do the flip front.className = 'flipped'; back.className = 'normal'; FLIPPED = true; } }

CSS:

/*----------------------------flip transition */ #back, #front { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; -webkit-transition-duration: .5s; -webkit-transform-style: preserve-3d; } .normal { -webkit-transform: rotateY(0deg); } .flipped { -webkit-user-select: element; -webkit-transform: rotateY(180deg); } 调试硬件加速能力

现在我们讲完基本变换的方法了，让我们看看它们是如何工作和合成的。

为了使这个奇妙的调试会话得以发生，让我们启动你喜欢的一个IDE和浏览器。我使用Mac，因此操作可能和你的操作系统的命令与方式都不同。首先我在命令行设置一些调试中使用的环境变量，然后启动Safari浏览器。打开Terminal，键入以下内容：

这样就能开启Safari的两个调试助手功能。CA_COLOR_OPAQUE 会向我们展现哪个元素被实际合成和加速了。 CA_LOG_MEMORY_USAGE 会向我们展现当向backing store发送我们的绘制操作时使用了多少内存。这可以确切告诉你你给移动设备施加了多少压力，以及可能提示你你对GPU的使用会消耗目标设备多少电量。

现在让我们启动Chrome，这样我们可以很好地看到每秒多少帧(FPS)的信息：

注意：不要在所有页选项中激活 GPU 合成。当浏览器检测到你标签中的合成项目，会只在左边角落显示FPS计数器，而这不是我们在本案例中想要的。

如果你在威力增强版的Chrome中查看本讲座效果页面，你会在左上方看到红色的 FPS 计数器。

这就是我们怎样知道硬件加速功能被开启的方法。这也给了我们一个关于动画如何运行的和你是否有任何疏漏的想法(继续运行本应停止的动画)。

另一种让硬件加速变得实际可视化的方法是，如果你通过先设置我上面提到的环境变量来用Safari打开相同的页面。每个被加速的DOM元素都会有一个红色色调。这告诉了我们到底层合成了哪些元素。注意，白色的导航因为不能加速而没有变红。

Chrome在 about:flags中也有一个类似的设置 “Composited render layer borders”。

另一个看到合成层的好方式，是开启这个选项之后查看WebKit的落叶演示。