javascript - 将修改器添加到场景

Question

我按照这个例子

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

我尝试引用修饰符，但不确定如何引用。

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),，我该如何动态地执行此操作？

Answer 1

您可以在变换属性上方添加一个 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);