使用 Famo.us 创建高性能移动 UI（3）扩展示例
|
- UID
- 1066743
|
使用 Famo.us 创建高性能移动 UI（3）扩展示例
为了让默认示例更复杂一些，下一个示例会旋转 100 个徽标实例，以 10x10 方形的形式进行布局，并交替绕 x 轴和 y 轴旋转。图 5 显示了最终可用的应用程序。
图 5. 扩展后的应用程序可旋转 100 个徽标实例 图 6 显示了必须为此示例构建的场景图。
图 6. 扩展后的应用程序的场景图 您可以看看这个版本是如何扩展以前示例的：
- 场景图中现在有 100 个分支，而不是 1 个。
- 每个分支现在都有两个 modifier。在旋转 modifier 将首个徽标移到所需的位置之前，创建并添加了另一个转换 modifier。
清单 2 中所示的代码创建了 modifier 并将其添加到每个徽标的 context 中，这些代码与第一个示例中的代码类似。其中包含了计算工作，以动画和更新每个帧。
清单 2. 扩展后的代码示例，可旋转 100 个徽标1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| var mainContext = Engine.createContext();
var initialTime = Date.now();
function rotY() {
return Transform.rotateY(.002 * (Date.now() - initialTime));
}
function rotX() {
return Transform.rotateX(.002 * (Date.now() - initialTime));
}
for (var i=0; i< 10; i ++)
for (var j=0; j<10; j++) {
var image =
new ImageSurface({
size: [50, 50],
content: '/content/images/famous_logo.png'
});
var transMod =
new Modifier({
size: image.getSize.bind(image),
transform: Transform.translate(j * 50, i * 50, 0)
}
);
var rotMod =
new Modifier({
origin: [0.5, 0.5],
// xor
transform : (((i % 2) !== (j % 2)) ? rotY : rotX)
});
mainContext.add(transMod).add(rotMod).add(image);
|
此应用程序有两个单独的转换函数，rotY 用于围绕 y 轴旋转，rotX 用于围绕 x 轴旋转。用嵌套的 i-j 循环形式创建场景图的各个分支。两个 modifier 被添加到每个分支中，分别名为 transMod （将徽标影像移动到位）和 rotMod（围绕徽标的原点旋转徽标）。
为了交替绕 x 轴和 y 轴进行旋转，rotMod 的 transform 属性被交替地更改：
1
| transform : (((i % 2) !== (j % 2)) ? rotY : rotX)
|
与第一个示例中一样，您设置内存中的场景图，Famo.us 引擎则负责处理它并以 rAF 速率更新 DOM。 |
|
|
|
|
|
