将修改器添加到场景

时间:2014-05-23 20:31:49

标签: javascript famo.us

我按照这个例子

https://famo.us/examples/0.2.0/core/scene/example

我尝试引用Modifier但不确定如何。

var myScene = new Scene({
    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"}
        }
    ]
});

因此,如果我想更改transform: Transform.translate(10, 10),,我该如何动态更改?

1 个答案:

答案 0 :(得分:1)

您可以在transform属性上方添加一个ID,该ID将为您提供对修饰符的引用,而不仅仅是目标。以下是单击“曲面”

时更改该修改器的示例

希望这有帮助!

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 myScene = new Scene({
    id: "root",
    opacity: 1,
    target: [
        {
            id: "mod1",
            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 surface = new Surface({
    size: [200, 200],
    content: "Hello World",
    classes: ["red-bg"],
    properties: {
        lineHeight: "200px",
        textAlign: "center"
    }
});

surface.on('click',function(){
    myScene.id["mod1"].transformFrom(function(){
        return Transform.translate(50,50,0);
    });
});

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

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

mainContext.add(myScene);