CODEWITHSUNDEEP
animationxamarin.forms
Alex
Alex

Reputation: 27

Xamarin.Forms Page Animation

I'm trying to make an animation for my page. I want that animation to get fired only when the page is first loaded. My animation code is working, sample:

public async Task BackgroundFlyUp()
        {
            var destinationRect = new Rectangle(0, Application.Current.MainPage.Height * (1 - FoodViewsConstants.FLY_UP_END),
                Application.Current.MainPage.Width, Application.Current.MainPage.Height * FoodViewsConstants.FLY_UP_END);

            await FlyUp.LayoutTo(destinationRect, FoodViewsConstants.FLY_UP_SPEED, Easing.Linear);
            await ContentGrid.FadeTo(1, FoodViewsConstants.CONTENT_FADE_SPEED);
        }

Although I don't want my animation to get fired every time OnAppearing is fired, I've tried to add the animation code in my OnAppearing method but it doesn't work right. (the fade is working but the FlyUp not) and being an async method, it can't be placed in the constructor. Can you guys help me out?

Upvotes: 1

Views: 308

Answers (1)

Wendy Zang - MSFT
Wendy Zang - MSFT

Reputation: 10958

Based on my test, I guess you do not get the correct from destinationRect. The Application.Current.MainPage.Width and Application.Current.MainPage.Height would get the width and height except on initial load when the MainPage hadn't been presented yet.

You could use the screen size instead.

 public async Task BackgroundFlyUp()
    {  
        // Get Metrics
        var mainDisplayInfo = DeviceDisplay.MainDisplayInfo; 

        // Width (in pixels)
        var width = mainDisplayInfo.Width;

        // Height (in pixels)
        var height = mainDisplayInfo.Height;


        var destinationRect = new Rectangle(0, height * (1 - FoodViewsConstants.FLY_UP_END),
            width, height * FoodViewsConstants.FLY_UP_END);


        await FlyUp.LayoutTo(destinationRect, 5000, Easing.Linear);
        
        await ContentGrid.FadeTo(1, FoodViewsConstants.CONTENT_FADE_SPEED);
    }

Upvotes: 1

Related Questions