Javascript 带滑动过渡的RenderController（Transform.translate）

默认情况下，著名的RenderController通过交叉淡入进行过渡，但希望in过渡从右侧滑动视图，out过渡将其移动到左侧。这能实现吗？目前，我只成功地控制了淡出速度和放松：

function AppView() {
    RenderController.call(this, {
        inTransition: {curve: "easeInOut", duration: 400},
        outTransition: {curve: "easeInOut", duration: 400},
        overlap: false
    });
    ...

以前，我们使用stateModifier和setTransforms实现了这个功能。使用RenderController时，如何获得相同的效果？

这似乎可以做到：

function AppView() {  
    RenderController.call(this, {
        overlap: true
    });
    this.options.inTransition = { curve: Easing.inQuad, duration: 500 };
    this.options.outTransition = { curve: Easing.inQuad, duration: 500 };
    this.inTransformFrom(function(progress) {
        return Transform.translate(window.innerWidth * (1.0 - progress), 0, 0);
    });
    this.outTransformFrom(function(progress) {
        return Transform.translate(window.innerWidth * (progress - 1.0), 0, -1);
    });
    // no cross-fading
    this.inOpacityFrom(function() { return 1; }); 
    this.outOpacityFrom(function() { return 1; });
    ...

这似乎可以做到：

function AppView() {  
    RenderController.call(this, {
        overlap: true
    });
    this.options.inTransition = { curve: Easing.inQuad, duration: 500 };
    this.options.outTransition = { curve: Easing.inQuad, duration: 500 };
    this.inTransformFrom(function(progress) {
        return Transform.translate(window.innerWidth * (1.0 - progress), 0, 0);
    });
    this.outTransformFrom(function(progress) {
        return Transform.translate(window.innerWidth * (progress - 1.0), 0, -1);
    });
    // no cross-fading
    this.inOpacityFrom(function() { return 1; }); 
    this.outOpacityFrom(function() { return 1; });
    ...

---

我一直在努力弄清楚如何使用RenderController进行自定义转换，因为文档或阅读代码不是很明显

这就是我在使用RenderController实例时如何修改您的答案，您需要使用实际函数而不是字符串来指定缓和（这可能就是为什么您的转换是同时发生的，而不是以不同的速率发生的）：

---

我一直在努力弄清楚如何使用RenderController进行自定义转换，因为文档或阅读代码不是很明显

这就是我在使用RenderController实例时如何修改您的答案，您需要使用实际函数而不是字符串来指定缓和（这可能就是为什么您的转换是同时发生的，而不是以不同的速率发生的）：

---

谢谢这对我也有用。我已经更新了答案。谢谢！这对我也有用。我已经更新了答案。