RenderController with sliding transitions (Transform.translate)

Question

Famous RenderController by default does transitions by crossfading but want the in-transition to swipe the view in from the right and the out-transition to move it to the left. Can this be achieved? For now I've only succeeded in controlling the fade speed and easing:

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

Previously we had this functionality with StateModifiers and setTransforms. How could I get the same while using RenderController?

luopio · Answer 1 · 2014-06-16T09:54:53.923

This seems to do it:

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

score 2 · Answer 2 · answered Jun 12 '14 at 21:14

I was struggling a little trying to figure out how to do custom transitions with the RenderController as the documentation or reading the code isn't very obvious.

This is how I had to modify your answer in terms of using a RenderController instance and you need to specify the easing with the actual function rather than a string (which is probably why your transitions were happening at the same time instead of at different rates):

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 with sliding transitions (Transform.translate)

2 Answers2