带有滑动转换(Transform.translate)的RenderController

RenderController with sliding transitions (Transform.translate)

本文关键字：translate RenderController Transform 转换      更新时间：2023-09-26

Famous RenderController默认情况下通过交叉渐变来实现过渡，但希望过渡中的视图从右边向内滑动，过渡外将其移动到左边。这能实现吗?现在我只成功地控制了淡出速度和舒缓:

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

以前我们在StateModifiers和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; });
    ...

我挣扎了一点，试图找出如何做自定义过渡与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);
...
相关文章：