电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 使用 Sencha Touch 开发超炫的跨平台移动 Web 应用（2） [打印本页]

作者: look_w 时间: 2018-9-23 13:48 标题: 使用 Sencha Touch 开发超炫的跨平台移动 Web 应用（2）

酷炫的动画效果一直以来，基于浏览器的 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 属性的含义可参考。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)