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中生成表面的动画状态

回答

相关问题