/ Famo.us

[Famo.us] Scene 核心說明

[UPDATE] Famo.us 官方已捨棄此模組,詳情請看官方 Github

這個核心模組是用於提供一個已經定義好的結構化場景,定義什麼呢?


Scene 核心

說穿了,他等同於一組 Modifier 物件,定義了以下這些事情,

  • translate
  • rotate
  • rotateX
  • rotateY
  • rotateZ
  • rotateAxis
  • scale
  • skew

以上必須要是 Transform 模組的相對應物件。

  • matrix3d

以上必須要是一個 Function 用以返回 matrix3d 的數組(陣列數組

由於 Scene 本身會產生 RenderNode 的物件,所以有關於 RenderNode 的相關設定他也可以延伸使用,它會將相關的設定,套用到場景中的子元件身上。

另外,你需要一個 id 來識別這個場景。

方法

這個模組只有三種方法,

  • create 字面上叫做建立,實際上,他會複製一個場景
  • load 讀取定義好的場景屬性,但是不真實建立一個場景物件
  • add 將物件加入對應的場景子元件設定當中

簡單範例

以下範例取自官方 Famo.us Example 並且加入額外的修改,

define(function(require, exports, module) {
    var Engine     = require("famous/core/Engine");
    var Surface    = require("famous/core/Surface");
    var Scene      = require("famous/core/Scene");
    var Transform  = require("famous/core/Transform");

    var mainContext = Engine.createContext();

    var sceneDefinition = {
        id: "root",
        opacity: 1,
        target: [
            {
                transform: Transform.translate(10, 10),
                target: {id: "foo"}
            },
            {
                transform: [
                    {rotateZ: 0.1},
                    {scale: [0.5, 0.5, 1]}
                ],
                origin: [0.5, 0.5],
                target: {id: "bar"}
            }
        ]
    };

    var myScene = new Scene(sceneDefinition);

    var surface = new Surface({
        size: [400, 400],
        content: "Hello World",
        classes: ["red-bg"],
        properties: {
            lineHeight: "400px",
            textAlign: "center",
            backgroundColor: "red"
        }
    });

    var surfaceTwo = new Surface({
        size: [400, 400],
        content: "Secondary",
        classes: ["grey-bg"],
        properties: {
            lineHeight: "400px",
            textAlign: "center",
            backgroundColor: "red"
        }
    });

    var surfaceThree = new Surface({
        size: [200, 200],
        content: "Hello World",
        classes: ["red-bg"],
        properties: {
            lineHeight: "200px",
            textAlign: "center",
            backgroundColor: "black",
            color: "white"
        }
    });

    var surfaceFour = new Surface({
        size: [200, 200],
        content: "Secondary",
        classes: ["grey-bg"],
        properties: {
            lineHeight: "200px",
            textAlign: "center",
            backgroundColor: "black",
            color: "white"
        }
    });

    var surfaceFive = new Surface({
        size: [100, 100],
        content: "Hello World",
        classes: ["red-bg"],
        properties: {
            lineHeight: "100px",
            textAlign: "center",
            backgroundColor: "white"
        }
    });

    var surfaceSix = new Surface({
        size: [100, 100],
        content: "Secondary",
        classes: ["grey-bg"],
        properties: {
            lineHeight: "100px",
            textAlign: "center",
            backgroundColor: "white"
        }
    });

    var mySceneClone = myScene.create();
    mySceneClone.id["foo"].add(surfaceFive);
    mySceneClone.id["bar"].add(surfaceSix);

    mainContext.add(mySceneClone);

    myScene.id["foo"].add(surfaceThree);
    myScene.id["bar"].add(surfaceFour);

    mainContext.add(myScene);

    var newScene = new Scene()
    newScene.load(sceneDefinition);

    newScene.id["foo"].add(surface);
    newScene.id["bar"].add(surfaceTwo);

    mainContext.add(newScene);
});

我們以上面的例子來說明,首先我們建立一個場景,叫做 root,然後賦予一個屬性,叫做 opacity: 1,接著開始設定子元件的特性(簡單來說,就是統一設定個別的 Modifier

var sceneDefinition = {
    id: "root",
    opacity: 1,
    target: [
        {
            transform: Transform.translate(10, 10),
            target: {id: "foo"}
        },
        {
            transform: [
                {rotateZ: 0.1},
                {scale: [0.5, 0.5, 1]}
            ],
            origin: [0.5, 0.5],
            target: {id: "bar"}
        }
    ]
};

最後,把對應的子元件加入場景,

myScene.id["foo"].add(surface);
myScene.id["bar"].add(surfaceTwo);

你也可以先新增一個場景,然後再讀入設定,

var newScene = new Scene()
newScene.load(sceneDefinition);

或者是,複製一個場景(複製的功能不會複製底下的物件,所以,你必須把物件加回去

var mySceneClone = myScene.create();
mySceneClone.id["foo"].add(surfaceFive);
mySceneClone.id["bar"].add(surfaceSix);

額外屬性

還記得剛剛的 opacity: 1 嗎?我說過 Scene 其實是一組類似 Modifier 模組的東西,所以,你可以用這一類的屬性來直接套用到全部的子元件上面,例如,

var sceneDefinition = {
        id: "root",
        opacity: 1,
        origin: [1, 1], // 全部子元件都給他 origin: [1, 1] 的設定
// 後略