使用 Sencha Touch 开发超炫的跨平台移动 Web 应用（2）

look_w

酷炫的动画效果一直以来，基于浏览器的 Web 程序动画效果常被人诟病，尤其是基于 JavaScript 的动画效果库相对于原生的应用程序来说，还是存在一定的差距，而刚发布的 Sencha Touch 1.1.0 版本就支持多达六种动画效果，分别是 cube、fade、flip、pop、slide 和 wipe。以最为酷炫的  为例，它将当前显示的界面面板（称之为 Card）想象为立方体的一个面，而即将展示的 Card 作为相邻的另外一个面，以左上方的顶点作为旋转基点进行旋转，从而得到 Card 之间切换的动画效果。大家一定很好奇它是如何做到这一点的，我们通过查看该动画效果的源代码即可找到答案。
图 5 Cube 动画效果示例在文件 sencha-touch-1.1.0\src\core\Anim.more.js 中，可以看到以下代码片段
清单 1

1 2 3 4 5 6 7 8 9 10

this.from = {                '-webkit-transform': 'rotate' + rotateProp + '(' + fromRotate + 'deg)' +                (showTranslateZ ? ' translateZ(' + fromZ + 'px)': '') + fromTranslate,                '-webkit-transform-origin': origin            }; this.to = {                '-webkit-transform': 'rotate' + rotateProp + '(' + toRotate + 'deg)                translateZ(' + toZ + 'px)' + toTranslate,                '-webkit-transform-origin': origin            };

由于 Sencha Touch 的动画组件是基于 Webkit 核心的浏览器，所以其动画效果实际上是基于 Webkit 的 3D 转换引擎，代码中 this.from 指的是当前 Card 如何旋转消失的属性，而 this.to 指的是要目标的 Card 如何旋转得以呈现，具体 CSS 属性的含义可参考  。