Question

我正在努力获得与着名的灯箱演示类似的转换。我有一个网格布局，当我点击网格中的一个表面时，我喜欢表面过渡，增大尺寸并在浏览器窗口中居中。

- 编辑这是演示，我想指出的是点击图像从其位置到屏幕中心的弹出窗口。 http://demo.famo.us/lightbox/

我有以下代码，我一直在使用它作为基础。 http://codepen.io/heyimlance/pen/JooQMX

var Engine = famous.core.Engine;
var Surface = famous.core.Surface;
var GridLayout = famous.views.GridLayout;
var StateModifier = famous.modifiers.StateModifier;
var Transform = famous.core.Transform;
var RenderNode = famous.core.RenderNode;
var Easing = famous.transitions.Easing;

var mainContext = Engine.createContext();

var grid = new GridLayout({
    dimensions: [8, 8],
});

var surfaces = [];

grid.sequenceFrom(surfaces);

function newSurface(id) {
    var surface = new Surface({
        content: id + 1,
        properties: {
            backgroundColor: "hsl(" + (id * 70 / 64) + ", 60%, 70%)",
            lineHeight: '50px',
            textAlign: 'center'
        }
    });

    var smod = new StateModifier({
      size: [50,50],
      transform: Transform.translate(0,0,1),
      origin: [.5,.5]
    });
    var rnode = new RenderNode();
    rnode.add(smod).add(surface);
    surfaces.push(rnode);

    surface.on('click', function() {
        console.log(smod)
        var zpos = (this.up || this.up == undefined) ? 0 : -180;
        if (!zpos) {

            this.up = false;
            smod.setTransform(Transform.translate(0,0,2000), { curve:Easing.outElastic, duration: 1000 })
            gridModifier.setTransform(Transform.translate(0,0,-2000), { curve:Easing.outElastic, duration: 500 })
        } else {
            this.up = true;
            gridModifier.setTransform(Transform.translate(0,0,0), { curve:Easing.outElastic, duration: 400 })
            smod.setTransform(Transform.translate(0,0,0), { curve:Easing.outElastic, duration: 1000 })

        }

    });
}

for(var i = 0; i < 64; i++) {
    newSurface(i);
}

var gridModifier = new StateModifier({
    size: [400, 400],
    align: [.5, .5],
    origin: [.5, .5],
    transform : Transform.translate(0,0,0),
});

var gridRotate = new StateModifier({
    transform : Transform.rotate(0,0,0),
});


mainContext.add(gridModifier).add(grid);
mainContext.setPerspective(1000);

Answer 1

使用您的代码，我做了一些更改，以便在点击时使用Lightbox渲染控制器。不确定您希望网格和曲面的转换，这应该为您提供转换选项。

<强> Here is a codepen of the example

代码：

var Engine = famous.core.Engine;
var Surface = famous.core.Surface;
var GridLayout = famous.views.GridLayout;
var StateModifier = famous.modifiers.StateModifier;
var Transform = famous.core.Transform;
var RenderNode = famous.core.RenderNode;
var RenderController = famous.views.RenderController;
var Lightbox = famous.views.Lightbox;
var Easing = famous.transitions.Easing;

var mainContext = Engine.createContext();

var grid = new GridLayout({
  dimensions: [8, 8],
});

var surfaces = [];

var showing;

grid.sequenceFrom(surfaces);

var cmod = new StateModifier({
  origin: [0.5, 0.5],
  align: [0.5, 0.5]
});
var controller = new Lightbox({
  inTransition: true,
  outTransition: false,
  overlap: true
});
controller.hide();

function newSurface(id) {
  var surface = new Surface({
    size: [undefined, undefined],
    content: id + 1,
    properties: {
      backgroundColor: "hsl(" + (id * 70 / 64) + ", 60%, 70%)",
      lineHeight: '50px',
      textAlign: 'center',
      cursor: 'pointer'
    }
  });

  surface._smod = new StateModifier({
    size: [420,420],
    origin: [0.5, 0.5],
    align: [0.5, 0.5]
  });
  surface._rnode = new RenderNode();
  surface._rnode.add(surface._smod).add(surface);

  surfaces.push(surface);

  surface.on('click', function(context, e) {
    if (this === showing) {
      controller.hide({ curve:Easing.inElastic, duration: 1000 }, function(){
        gridModifier.setTransform(Transform.scale(1,1,1), 
            { curve:Easing.outElastic, duration: 1000 });
      });
      showing = null;
    } else {
      showing = this;
      gridModifier.setTransform(Transform.scale(0.001, 0.001, 0.001),
                        { curve:Easing.outCurve, duration: 300 });
      cmod.setTransform(Transform.translate(0, 0, 0.0001));
      controller.show(this._rnode, { curve:Easing.outElastic, duration: 2400 });
    }

  }.bind(surface, mainContext));
}

for(var i = 0; i < 64; i++) {
  newSurface(i);
}

var gridModifier = new StateModifier({
  size: [400, 400],
  align: [0.5, 0.5],
  origin: [0.5, 0.5]
});

mainContext.add(gridModifier).add(grid);
mainContext.add(cmod).add(controller);
mainContext.setPerspective(1000);

Answer 2

我认为最好的方法是遵循＆＃34; StateModifier＆＃34;您可以在famo.us大学找到的示例：http://famo.us/university/lessons/#/famous-102/transitionables/2

做一个比例：

// animates x- and y-scale to 1
stateModifier.setTransform(
    Transform.scale(1, 1, 1),
    { duration : 2000, curve: Easing.outBack }
);

然后对齐[0.5,0.5]：

var alignModifier = new Modifier({
    align: [0.5, 0.5]
});

如果你想要缩小背景，你必须应用＆＃39; scale＆＃39;修改器也使所有其他表面变小。

famo.us灯箱演示过渡

2 个答案:

代码：