Javascript famou.us曲面单击从左滑入

我是名人堂的noob。我想加载一个带有从左滑入动画的曲面“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);
});

---

这会将曲面从顶部滑动到指定位置。但是我的表面必须从外面滑到外面。此外，我想滑出曲面，并获得前一个曲面。我该怎么做？任何样品都可以。

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

touchstart

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

var image1=新的ImageSurface（{
大小：[未定义，300]，
内容:'http://i.imgur.com/UQWUJPr.jpg?1'
});
var image2=新的ImageSurface（{
大小：[未定义，300]，
内容:'https://i.imgur.com/nC0i0r2.jpg?1'
});
var trans1=新的TransitionableTransform（Transform.translate（100200,0））；
var mod1=新修改器({
变换：trans1
});
var trans2=新的TransitionableTransform（Transform.translate（-1000,200,0））；
var mod2=新修改器({
变换：trans2
});
mainContext.add（mod1.add）（image1）；
mainContext.add（mod2.add）（image2）；
图1.在（'单击'，函数（）上）{
trans1.set(
Transform.translate（-1000200,0），
{持续时间：1000，曲线：'easeInOut'}
);
trans2.set(
Transform.translate（100200,0），
{持续时间：1000，曲线：'easeInOut'}
);
});
图2.在（'单击'，函数（）上）{
trans1.set(
Transform.translate（100200,0），
{持续时间：1000，曲线：'easeInOut'}
);
trans2.set(
Transform.translate（-1000200,0），
{持续时间：1000，曲线：'easeInOut'}
);
});

选项2：使用

EdgeSwapper

并修改控制器。（高级）

var image1=新的ImageSurface（{
大小：[未定义，300]，
内容:'http://i.imgur.com/UQWUJPr.jpg?1'
});
var image2=新的ImageSurface（{
大小：[未定义，300]，
内容:'https://i.imgur.com/nC0i0r2.jpg?1'
});
var swapper=newedgeswapper（）；
函数_(zMax,progress){
返回Transform.translate（-this._size[1]*（1-进度），0，zMax*（1-进度））；
}
交换程序。\u controller.inTransformFrom(
CachedMap.create（_transformMapLeft.bind（swapper，0.0001））；
交换程序。\u controller.outTransformFrom(
CachedMap.create（_transformMapLeft.bind（swapper，-0.0001））；
var mod=新修改器({
transform:transform.translate（100100,0）
});
mainContext.add（mod）.add（swapper）；
swapper.show（图1）；
图1.在（'单击'，函数（）上）{
swapper.show（图2）；
}.约束（这个）；
图2.在（'单击'，函数（）上）{
swapper.show（图1）；
}.约束（这个）；