famou.us 单击时从左侧滑入表面

Question

我是 famo.us 的菜鸟。我想从左侧动画

加载一个带有幻灯片的表面 'onclick'

我当前的操作是使用

image1.on('touchstart', function() {
    var st = new Modifier();
    st.setTransform(
        Transform.translate(100, 300, 0),
        { duration : 1000, curve: 'easeInOut' }
    );
    var appView = new AppView();
    mainContext.add(st).add(appView);
});

这会将表面从顶部滑动到指定位置。但是我的表面必须从外面滑到视图中。另外，我想将表面滑出并取回之前的表面。我该怎么做呢？任何样品也可以。

Answer 1

有很多选择，但我会提供两种方法。为了示例，我更改了 touchstart。

选项 1：从正确的初始变换位置开始变换并更改图像。 （初学者）

Example 1: jsBin here

  var image1 = new ImageSurface({ 
    size: [undefined, 300],
    content: 'http://i.imgur.com/UQWUJPr.jpg?1'
  });
  var image2 = new ImageSurface({ 
    size: [undefined, 300],
    content: 'https://i.imgur.com/nC0i0r2.jpg?1'
  });

  var trans1 = new TransitionableTransform(Transform.translate(100, 200 ,0));
  var mod1 = new Modifier({
    transform: trans1
  });

  var trans2 = new TransitionableTransform(Transform.translate(-1000, 200 ,0));
  var mod2 = new Modifier({
    transform: trans2
  });

  mainContext.add(mod1).add(image1);
  mainContext.add(mod2).add(image2);

  image1.on('click', function() {
    trans1.set(
        Transform.translate(-1000, 200, 0),
        { duration : 1000, curve: 'easeInOut' }
    );
    trans2.set(
        Transform.translate(100, 200, 0),
        { duration : 1000, curve: 'easeInOut' }
    );
  });

  image2.on('click', function() {
    trans1.set(
        Transform.translate(100, 200, 0),
        { duration : 1000, curve: 'easeInOut' }
    );
    trans2.set(
        Transform.translate(-1000, 200, 0),
        { duration : 1000, curve: 'easeInOut' }
    );
  });

选项 2：使用 EdgeSwapper 并修改控制器。 （高级）

Example 2: jsBin here

  var image1 = new ImageSurface({ 
    size: [undefined, 300],
    content: 'http://i.imgur.com/UQWUJPr.jpg?1'
  });
  var image2 = new ImageSurface({ 
    size: [undefined, 300],
    content: 'https://i.imgur.com/nC0i0r2.jpg?1'
  });

  var swapper = new EdgeSwapper();
  function _transformMapLeft(zMax, progress) {
    return Transform.translate(-this._size[1] * (1 - progress), 0, zMax * (1 - progress));
  }

  swapper._controller.inTransformFrom(
       CachedMap.create(_transformMapLeft.bind(swapper, 0.0001)));

  swapper._controller.outTransformFrom(
          CachedMap.create(_transformMapLeft.bind(swapper, -0.0001)));

  var mod = new Modifier({
    transform: Transform.translate(100,100,0)
  });

  mainContext.add(mod).add(swapper);
  swapper.show(image1);

  image1.on('click', function() {
    swapper.show(image2);
  }.bind(this));
  image2.on('click', function() {
    swapper.show(image1);
  }.bind(this));