javascript - 具有滑动过渡的 RenderController (Transform.translate)

Question

Famous RenderController 默认情况下通过淡入淡出进行过渡，但希望过渡中的 View 从右侧滑入，过渡中的 View 向左滑动。这可以实现吗？现在我只成功地控制了淡入淡出速度和缓动:

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

之前我们通过 StateModifiers 和 setTransforms 获得了这个功能。我如何在使用 RenderController 时获得相同的结果？

Answer 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; });
    ...