famo.us使用StateModifier在GridLayout中生成表面的動畫狀態

如何將StateModifier附加到駐留在GridLayout中的Surface？famo.us使用StateModifier在GridLayout中生成表面的動畫狀態

我的代碼看起來是這樣的：

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

由於表面不加渲染樹明確，如：

我不知道我怎麼可以附加修飾符的表面？我錯過了什麼嗎？任何幫助非常感謝

來源

2014-10-09 doemsche

您將需要添加一個視圖作爲您的順序從項目。下面的示例代碼使用一個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);

來源

2014-10-10 22:26:31 talves

基本上什麼Talves要說的是：不要表面增加你的網格，添加修飾符（每個包含一個表面）到你的網格。（： – trusktr 2014-10-13 04:18:12

）在這種情況下，你不僅限於可渲染數組中的表面，還有一點是這個可渲染數組將被轉換爲ViewSequence，你也可以將一個ViewSequence傳遞給'sequenceFrom'函數 – talves 2014-10-13 04:29:32

是的，你基本上可以將任何場景圖樹添加到網格中。 – trusktr 2014-10-13 05:20:15

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

來源

2014-11-07 18:26:44 Duduche

您也可以使用GridLayout._modifiers []訪問修改器，但最好直接管理Transitionables。 – Duduche 2014-11-07 21:45:00

famo.us使用StateModifier在GridLayout中生成表面的動畫狀態

回答

相關問題