Board logo

标题: 使用 Famo.us 创建高性能移动 UI（3）扩展示例 [打印本页]
作者: look_w    时间: 2018-11-2 16:26     标题: 使用 Famo.us 创建高性能移动 UI（3）扩展示例

为了让默认示例更复杂一些，下一个示例会旋转 100 个徽标实例，以 10x10 方形的形式进行布局，并交替绕 x 轴和 y 轴旋转。图 5 显示了最终可用的应用程序。

图 5. 扩展后的应用程序可旋转 100 个徽标实例图 6 显示了必须为此示例构建的场景图。
图 6. 扩展后的应用程序的场景图您可以看看这个版本是如何扩展以前示例的：
清单 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。



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