장면

Question

에 수정을 추가 내가 어떻게 Modifier하지만 확인을 참조하려고이 예

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를 추가하여 대상이 아닌 수정 자에 대한 참조를 제공 할 수 있습니다. '표면'을 클릭하면 해당 수정자를 변경하는 예가 있습니다

희망이 있습니다.

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);