Page Animations

Like explained in the Router section, you can influence how the transition from one view to another is animated by Arva. By default, all transitions are a simple fade.

To alter an animation, you pass a plain object to the router specifying which animation to use in which scenario.

A typical Controller Specification object might look something like this:

JavaScript

{
    HomeController: {
        controllers: [
            {
                transition: {duration: 300, curve: Easing.outQuad},
                animation: AnimationController.Animation.FadedZoom,
                activeFrom: ['DemoController', 'DemoTwoController']
            },
            {
                transition: {duration: 300, curve: Easing.outQuad},
                animation: AnimationController.Animation.Zoom,
                activeFrom: ['DemoThreeController']
            }
        ],
        methods: {
            next: {
                transition: {duration: 300, curve: Easing.outQuad},
                animation: AnimationController.Animation.Slide.Right
            },
            previous: {
                transition: {duration: 300, curve: Easing.outQuad},
                animation: AnimationController.Animation.Slide.Left
            }
        }
    },
    DemoController: {
        controllers: [
            {
                transition: {duration: 300, curve: Easing.outQuad},
                animation: AnimationController.Animation.Slide.Up,
                activeFrom: ['HomeController']
            }
        ]
    }
}

Let's cut that up into smaller pieces and analyse what's going on.

'controllers' or 'methods'

The topmost HomeController and DemoController keys specify a target controller. If the new route contains this controller, the router will look inside that object to find the relevant animation.

JavaScript

{
    HomeController: {
        /* We're going to #/Home/<someMethod> */
    },
    DemoController: {
        /* We're going to #/Demo/<someMethod> */
    }
}

Inside of those objects, we have two keys: 'controllers' and 'methods'. The 'controllers' value is used if we are moving from a different controller to the current controller.

For example, going from #/Demo/someMethod -> #/Home/someOtherMethod, we'll use the 'controllers' value to look for an animation.

If we're staying inside the same controller, but to a different method in that controller, we use the 'methods' value to look for an animation. For example, #/Home/method1 -> #/Home/method2 triggers the router to look in the 'methods' value.

Deeper look into 'controllers'

The 'controllers' value is an array of plain objects. Each of these objects represents an animation used for one or more source controllers.

We can read the following as "use this animation when going from DemoController or DemoTwoController to HomeController":

JavaScript

    HomeController: {
        controllers: [
            {
                transition: {duration: 300, curve: Easing.outQuad},
                animation: AnimationController.Animation.FadedZoom,
                activeFrom: ['DemoController', 'DemoTwoController']
            }
        ]
    }

Deeper look into 'methods'

The 'methods' value is an object containing keys 'next' and 'previous'. The router checks the route history, and if the current route appears earlier in the route history it will use the 'previous' animation. Otherwise, it will use the 'next' animation.

For example, consider this route flow:

JavaScript

/* The App start launches #/Home/Index, so the history is ['Home/Index'] */

/* This triggers the methods.next since 'Home/newMethod' is not present
    in the route history. Afterwards, the history is ['Home/Index', 'Home/newMethod']. */
router.go(HomeController, 'newMethod');

/* 'Home/Index' is present in the history, so the router triggers method.previous.
    It pops 'Home/newMethod' from the history since we're going back.
    That means the history is now back to ['Home/Index']. */
router.go(HomeController, 'Index');