famou.us表面从左侧点击滑动

Question

我是famo.us的noob。我想加载一个表面＆＃39; onclick＆＃39;从左侧动画中滑入

我目前的行动是使用

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