0

I have a question. I want to create a GetStarted screen, but for that I thought it would be fun if I had an animated background. Just very simple: A background color breathing effect from #212121 to #5e5e5e

I can't find anything on the internet about animated backgrounds. Can someone help me, or is this not possible?

A. Vreeswijk
  • 822
  • 1
  • 19
  • 57
  • 1
    https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/animation/ – Jason Nov 20 '19 at 23:08
  • In those examples you have Fading, but that is used with an image. How can I use that on background color? With 2 different background I can just put the light one on the background and the darker one fading. – A. Vreeswijk Nov 20 '19 at 23:30
  • https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/animation/custom#creating-a-custom-animation-extension-method – Jason Nov 20 '19 at 23:36
  • Animation applies to any ViewElement, not just Images. – Jason Nov 20 '19 at 23:37
  • If you want gradient effect; Try Pancakeview https://github.com/sthewissen/Xamarin.Forms.PancakeView – Anees Deen Nov 21 '19 at 07:23

1 Answers1

0

Solution1:

You could use ViewExtensions.FadeTo(VisualElement, Double, UInt32, Easing) Method to perform the fade.

ViewExtensions.FadeTo(VisualElement, Double, UInt32, Easing) Method: https://learn.microsoft.com/en-us/dotnet/api/xamarin.forms.viewextensions.fadeto?view=xamarin-forms

I use BoxView for example.

Xaml:

<BoxView
            x:Name="boxView"              
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"
            Color="Accent" />

Code:

public Page26()
    {
        InitializeComponent();
        Animation(); 
    }

    private bool _isAnimate;
    private async void Animation()
    {
        var fade = 1.0;
        _isAnimate = true;
        while (_isAnimate)
        {
            await boxView.FadeTo(Fade(), 1000, Easing.Linear);
        }
        double Fade()
        {
            fade = fade == 1 ? 0.1 : 1;
            return fade;
        }
    }

enter image description here

The GIF is a bit jittery but on device, the animation is smooth.

Updated:

You could use the boxview as the background color and do the overlap for the controls.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>


    <BoxView
        x:Name="boxView"       
        HorizontalOptions="FillAndExpand"
        VerticalOptions="FillAndExpand"
        Color="Accent" Grid.Row="0" Grid.Column="0"  Grid.ColumnSpan="3" Grid.RowSpan="3"/>

    <Button Grid.Row="1" Grid.Column="1" Text="Button" BackgroundColor="Black" TextColor="White"></Button>

</Grid>

enter image description here

For more about overlap, you could check the link below. How do overlap in Xamarin forms?

Solution2:

Set the name of ContentPage.

<ContentPage 
    ……
 x:Name="page">

MainPage.xaml.cs：

 public MainPage()
    {
        InitializeComponent();
        Animation();
    }

    private bool _isAnimate;
    private async void Animation()
    {
        var fade = 1.0;
        _isAnimate = true;
        while (_isAnimate)
        {
            await page.FadeTo(Fade(), 1000, Easing.Linear);
        }
        double Fade()
        {
            fade = fade == 1 ? 0.1 : 1;
            return fade;
        }
    }

enter image description here

Wendy Zang - MSFT
  • 10,509
  • 1
  • 7
  • 17