使用 Famo.us 创建高性能移动 UI（2）使用 Famo.us

look_w

下面看看实际的 Famo.us 应用如何帮助您理解各种概念。图 2 中的示例是 Famo.us 启动包中包含的默认应用程序，并且也是 generator-famous 包默认生成的（参见  ）。该应用程序会围绕 y 轴旋转 Famo.us 徽标。

图 2. generator-famous 生成的默认应用程序在 main.js 中，通过清单 1 中所示的代码创建惟一的 ImageSurface。
清单 1. 创建 ImageSurface（呈现到 DOM                    <img>）

1 2 3 4 5

var logo = new ImageSurface({     size: [200, 200],     content: '/content/images/famous_logo.png',     classes: ['backfaceVisibility'] });

设置 Famo.us 对象实例化方面的选项Famo.us 对象包含一组默认的选项。创建对象实例时，可传递一个 options 对象（由键值对组成）作为参数。在参数中指定的值会覆盖默认值 — 在整个 Famo.us 中使用的一种标准模式。

在清单 1 中，content 选项对应于底层 <img> 标记的 src 属性。classes 选项将 CSS 类添加到 HTML 元素。backfaceVisibility CSS 类确保在徽标转动时，用户可以看到徽标的后面，该类在 app.css 中定义：

1 2 3 4

.backfaceVisibility {   -webkit-backface-visibility: visible;   backface-visibility: visible; }

与                    origin 属性指定在进行旋转转换操作时，元素围绕哪个锚点进行旋转。align 属性指定将子对象的原点放在父对象显示区域中的何处。两个属性的值范围是 [0,0] 到 [1,1]，您可使用相同的约定（如   中所示）来指定它们。例如，属性 origin = [0, 0] 和 align = [0, 0] 将元素放在其父元素内的左上角，其中元素的点 (0,0) 与父元素的点 (0,0) 对齐。之后都要相对于元素的坐标 (0,0) — 即元素左上角，而不是其中心来执行任何元素旋转操作。如果 align                    是 undefined（未指定），则默认值为 origin。

Context— 一个与 DOM 节点相关联的微型 DOM 管理器 — 管理一个场景图，通过节点内的所有 DOM 来表示。通常您只有一个 context 实例（除非正在处理特殊的项目，如多个透视图或平视显示器）。
Modifier 是 Famo.us 场景图中的呈现节点，可修改其下的呈现节点的一些属性（通常是对其应用转换）。可以将多个 Modifier 链接起来，在这种情况下转换矩阵是组合到一起的，并且场景图的叶对象始终是可呈现对象。
在这个例子中，centerSpinModifier 包含一个 origin 属性和一个 transform 属性。相对于包含它的父对象来指定 origin 属性 — 在这个例子中是 Famo.us context。图 3 显示了指定 Famo.us origin 的约定。
图 3. 设置 origin 属性的约定在   中，在 3x3 网格中排列了 9 个点。[0.0] 位于左上角，[1,1] 位于右下角。[0.5, 0.5] 位于中间。其他各点都遵从该约定，如 [1,0] 位于右上角，[0,1] 位于左下角。
centerSpinModifier 中的 transform 属性返回一个函数，此函数通过 Transform.rotateY() 绕 y 轴旋转：

1 2 3 4 5 6 7 8

var initialTime = Date.now();   var centerSpinModifier = new Modifier({       origin: [0.5, 0.5],       transform : function() {           return Transform.rotateY(.002 * (Date.now() - initialTime));       }   }); mainContext.add(centerSpinModifier).add(logo);

此代码完成的这个简单场景图如图 4 所示。
图 4. 默认应用程序的场景图现在 Famo.us 引擎会评估内存中的场景图，并通过 rAF 的驱动在每一帧上高效地更新 DOM，约每秒更新 60 次。每次 centerSpinModifer 会检查自 initialTime 开始以来所经过的时间并围绕 y 轴递增式地旋转徽标。您可轻松地修改 0.002 常量，从而改变旋转的速度。
总结：

• 您创建 logoImageSurface。
• 您创建 Famo.us Modifier：
  • 设置徽标在 context 的中心围绕徽标自己的中心 (origin = [0.5 0.5]) 旋转
  • 使用可围绕 y 轴进行递增式旋转的 transform
• 您可将 Modifier 添加到场景图中，然后直接在 Modifier 的下面添加 logo ImageSurface。
• Famo.us 引擎处理该场景图并以 rAF 速率更新 DOM，徽标则不停顿地旋转。