Question

默认情况下，着名的RenderController通过交叉渐变进行转换，但希望转换中从右侧滑动视图，向外转换以将其移动到左侧。这可以实现吗？现在我只成功控制了褪色速度和缓和：

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

Answer 2

我正在努力寻找如何使用RenderController进行自定义转换作为文档或阅读代码并不是很明显。

这就是我必须在使用RenderController实例方面修改你的答案，你需要用实际函数而不是字符串来指定缓动（这可能是你的转换同时发生而不是在不同的费率）：

var ctrl = new RenderController({
    inTransition: {curve: Easing.inOutQuart, duration: 600},
    outTransition: {curve: Easing.inOutQuart, duration: 600},
    overlap: true
});

ctrl.inTransformFrom(function(progress) {
    return Transform.translate(window.innerWidth * (1.0 - progress), 0, 0);
});

ctrl.outTransformFrom(function(progress) {
    return Transform.translate(window.innerWidth * progress - window.innerWidth, 0, 0);
});

// No opacity change
ctrl.inOpacityFrom(function() { return 1; });
ctrl.outOpacityFrom(function() { return 1; });

// Add to the context or parent view
this.add(ctrl);

// Now show the next child view
ctrl.show(myView);
...

具有滑动过渡的RenderController（Transform.translate）

2 个答案: