添加改性劑到現場

Question

我跟着這個例子

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),，我該怎麼做動態？

Answer 1

您可以在transform屬性上添加一個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);