Animation

Animating components in ReactorUI essentially means animating between component states. Xamarin Forms already contains a set of useful functions that let you move properties of controls over time according to a tween function. You can still use standard animation functions in ReactorUI getting a reference to the control as explained here but it's not the recommended way.

In the most simple scenarios, enable animations in ReactorUI is as simple as calling the function WithAnimation() over the component you want to animate.

Let's build an example to illustrate the overall process. Consider a page that contains a frame and an image inside it that is initially hidden. When user tap the image we want to gradually show it and scale to full screen.

This is the initial code of the sample:

public class MainPageState : IState
{
    public bool Toggle { get; set; }
}

public class MainPage : RxComponent<MainPageState>
{
    public override VisualNode Render()
    {
        return new RxContentPage()
        {
            new RxFrame()
            { 
                new RxImage()
                    .HCenter()
                    .VCenter()
                    .Source("city.jpg")
            }
            .OnTap(()=>SetState(s => s.Toggle = !s.Toggle))
            .HasShadow(true)
            .Scale(State.Toggle ? 1.0 : 0.5)
            .Opacity(State.Toggle ? 1.0 : 0.0)
            .Margin(10)
        };
    }
}

NOTE: Here you can learn how to integrate resources like photos in Xamarin Forms.

Running the application you should see something like this:

Sample app without animation

Now let's add WithAnimation() to image component:

return new RxNavigationPage()
{
    new RxContentPage("Animation Demo")
    {
        new RxImage()
            .HCenter()
            .VCenter()
            .Source("city.jpg")
            .OnTap(()=>SetState(s => s.Toggle = !s.Toggle))
            .Opacity(State.Toggle ? 1.0 : 0.0)
            .Scale(State.Toggle ? 1.0 : 0.5)
            .Margin(10)
            .WithAnimation()
    }
};

By default WithAnimation()enables any pending animation applied to the component before it: in the above sample Opacity()and Scale() by default add a tween animation each for the respective properties.

Sample app with animation

Try experimenting modifying the position of the call to WithAnimation() or passing a custom duration (600ms is the default value) or easing function (Linear is the default). Many other properties are animatable by default but you can create custom animation with more complex algorithms for other properties or combination of properties. Animations in ReactorUI is inspired to SwiftUI so you can even take a look to its documentation to discover other powerful ways of animating between states.