Xamarin Forms View Animation

0
votes

I have two Buttons on top of my screen .. Button A and Button B.. ByDefault button A will be selected and below that a view with all details related to Button A. When user clicks on Button B , the view will move to left and new view having the details related to button B will come from right with fade in and fade out animation...

Current Status- I am able to change the View on Button Click by hiding one and unhiding other.. But I am stuck with Animation..

Can You Please help me out.

3
xamarinxamarin.formsxamarin.iosxamarin.android
It sounds like you're trying to implement a tabbed page. Have you looked at Xamarin's TabbedPage - Max Hampton
Can we customize Tabbed bar in Xamarin Forms? - Nilesh Jha
Yes, using TabbedRenderer can do that.(docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/…) - Junior Jiang
I can't use Tabbed Page as those buttons are inside ContentPage with some other options - Nilesh Jha

3 Answers

1
votes

You can use a parent/child-based Animation to control the slide and fade and have them properly sync'd

void RunAnim(Color disableColor, Color backgroundColor, bool disable)
{
    new Animation
    {
        { 0, 1, new Animation (v => view1.Opacity = v, disable ? 1 : 0, disable ? 0 : 1) },
        { 0, 1, new Animation (v => view1.TranslationX = v,  disable ? 0 : -view1.Width, disable ? -view1.Width : 0) },
        { 0, 1, new Animation (v => view2.TranslationX = v, disable ? view1.Width : 0, disable ? 0 : view1.Width) },
        { 0, 1, new Animation (v => view2.Opacity = v, disable ? 0 : 1, disable ? 1 : 0) },
    }.Commit(this, "viewAnim", 16, 1000, Easing.CubicInOut, (v, c) =>
    {
        physicalButton.IsEnabled = !disable;
        physicalButton.BackgroundColor = disableColor;
        networkButton.IsEnabled = disable;
        networkButton.BackgroundColor = backgroundColor;
    });
}

void Physical_Clicked(object sender, EventArgs e)
{
    var disableColor = Color.Navy;
    var backgroundColor = Color.Transparent;
    var disable = true;

    RunAnim(disableColor, backgroundColor, disable);
}

void Network_Clicked(object sender, EventArgs e)
{
    var disableColor = Color.Transparent;
    var backgroundColor = Color.Navy;
    var disable = false;

    RunAnim(disableColor, backgroundColor, disable);
}

enter image description here

Note: The gif looks janky, but the animation is smooth...

0
votes

First, in your page

private readonly ScreenMetrics _metrics;
private readonly int _formsWidth;
private readonly int _formsHeight;

public MainPage()
{
    InitializeComponent();

    //calculate screen size, to use in animations
    _metrics = DeviceDisplay.ScreenMetrics;
    _formsWidth = Convert.ToInt32(_metrics.Width / _metrics.Density);
    _formsHeight = Convert.ToInt32(_metrics.Height / _metrics.Density);
}

In OnAppearing, translate the elements you want outside the screen

 protected override async void OnAppearing()
        {
            base.OnAppearing();

            await Task.WhenAll(
                //translate to the left side of the device, negative
                YourViewLeftSide.TranslateTo(_formsWidth, 0, 0, null),
                //translate to the right side of the device, negative
                YourViewRightSide.TranslateTo(-_formsWidth, 0, 0, null)
            );
        }

On the button that animates left view

async void OnButton1Clicked(object sender, EventArgs args)
{
    //animate left side 
    YourViewLeftSide.TranslateTo(0, 0, 400, Easing.CubicInOut),
}

On the button that animates right view

async void OnButton2Clicked(object sender, EventArgs args)
{
    //animate right side 
    YourViewRightSide.TranslateTo(0, 0, 400, Easing.CubicInOut),
}

Now you can adapt and customize to your needs!

0
votes

Finally I used CarouselView to achieve this Functionality