[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] 的設定
// 後略