famo.us StateModifier가있는 GridLayout의 서페이스 상태를 애니메이션으로 표현합니다.

Question

GridLayout에있는 서페이스에 StateModifier를 부착하려면 어떻게해야합니까?

//... 
var grid = new Gridlayout({dimensions: [2,1]}); 

var surfaces = []; 
grid.sequenceFrom(surfaces); 

var surface01 = new Surface({content: 'Surface 01'}); 
var surface02 = new Surface({content: 'Surface 02'}); 

surfaces.push(surface01,surface02); 

this._node.add(grid); 
//... 

표면이 같은 명시 적으로 렌더링 트리에 추가되지 않기 때문에 : 나는이에 수정을 첨부 할 수 있습니다 방법을 모르는

내 코드는 다음과 같이 보입니다 표면?! 내가 놓친 게 있니? 어떤 도움을 많이 주신 경우

Answer 1

항목에서보기로보기를 추가해야합니다. 예제 코드는 아래의보기 항목으로 RenderNode를 사용하고 StateModifier 및 Surface

Example jsBin Code [Famo.us의 v0.3.0]

var mainContext = Engine.createContext(); 

    var surfaces = []; 
    var grid = new GridLayout({ 
    dimensions: [2, 1] 
    }); 

    var counter = 0; 

    _getView = function(name) { 
    var rnode = new RenderNode(); 
    var state = new StateModifier({ 
     size: [undefined, 500] 
    }); 
    var surface = new Surface({ 
     content:name, 
     properties: { 
     backgroundColor: "hsl(" + (counter * 360/8) + ", 100%, 50%)", 
     lineHeight: '500px', 
     textAlign: 'center', 
     cursor: 'pointer' 
     } 
    }); 
    rnode.add(state).add(surface); 
    counter += 1; 
    return rnode; 
    }; 

    surfaces.push(_getView('Surface 1')); 

    surfaces.push(_getView('Surface 2')); 

    grid.sequenceFrom(surfaces); 

    mainContext.add(grid); 

Answer 2

난 아무것도없는 아니에요 경우 원하는 추가 그 중 하나를 클릭하여 gridLayout 내부에서 서페이스의 상태를 수정 하시겠습니까 ?? GridLayout과는 gridlayout._states에게 [ '당신의 표면의 인덱스를']를 입력하여 액세스 할 수있는 상태의 배열을 가지고

var mainContext = Engine.createContext(); 
 

 
var surfaces = []; 
 

 
var GridLayout = new GridLayout({ 
 
    dimensions: [4,10] 
 
    }); 
 

 
for (var i = 0; i<40; i++){ 
 
    
 
    var surface = new Surface({ 
 
    content: 'surface' + i, 
 
    size: [200, 200] 
 
    }); 
 
    
 
    surface.index = i; 
 
    
 
    surfaces.push(surface); 
 
    }); 
 

 
GridLayout.sequenceFrom(surfaces); 
 

 
//now if you want to modify the state of the surface with index 2 
 
GridLayout._states[2].set(Transform.rotateX(Math.PI/2)); // your surface will rotate by 90° on X axis 
 

 
mainContext.add(GridLayout);

기본적으로