How to animated grid background like instagram uwp app?

Question

The background keeps on transforming from one gradient to other very beautifully.I have no idea from where to start? Below are the screenshots:

Answer 1

Here's a simple example:

XAML

<Page
    x:Class="GradientAnimation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GradientAnimation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <Storyboard x:Key="GradientAnimation" RepeatBehavior="Forever" SpeedRatio="0.2">
            <ColorAnimationUsingKeyFrames
                Storyboard.TargetName="MyGrid"
                Storyboard.TargetProperty="(UIElement.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"
                EnableDependentAnimation="True"
                BeginTime="-0:0:0.5">
                <LinearColorKeyFrame KeyTime="0:0:0" Value="#FF0000"/>
                <LinearColorKeyFrame KeyTime="0:0:1" Value="#FFFF00"/>
                <LinearColorKeyFrame KeyTime="0:0:2" Value="#00FF00"/>
                <LinearColorKeyFrame KeyTime="0:0:3" Value="#00FFFF"/>
                <LinearColorKeyFrame KeyTime="0:0:4" Value="#0000FF"/>
                <LinearColorKeyFrame KeyTime="0:0:5" Value="#FF00FF"/>
                <LinearColorKeyFrame KeyTime="0:0:6" Value="#FF0000"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames
                Storyboard.TargetName="MyGrid"
                Storyboard.TargetProperty="(UIElement.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"
                EnableDependentAnimation="True">
                <LinearColorKeyFrame KeyTime="0:0:0" Value="#FF0000"/>
                <LinearColorKeyFrame KeyTime="0:0:1" Value="#FFFF00"/>
                <LinearColorKeyFrame KeyTime="0:0:2" Value="#00FF00"/>
                <LinearColorKeyFrame KeyTime="0:0:3" Value="#00FFFF"/>
                <LinearColorKeyFrame KeyTime="0:0:4" Value="#0000FF"/>
                <LinearColorKeyFrame KeyTime="0:0:5" Value="#FF00FF"/>
                <LinearColorKeyFrame KeyTime="0:0:6" Value="#FF0000"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </Page.Resources>

    <Grid x:Name="MyGrid">
        <Grid.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                <GradientStop Offset="0"/>
                <GradientStop Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>

        <StackPanel VerticalAlignment="Center" Margin="10,0">
            <TextBlock Text="My App" FontSize="30" FontWeight="Bold" HorizontalAlignment="Center"/>
            <TextBox PlaceholderText="Username" Margin="0,40,0,0"/>
            <TextBox PlaceholderText="Password" Margin="0,10,0,0"/>
            <Button Margin="0,20,0,0" Content="Log in" HorizontalAlignment="Center"/>
        </StackPanel>
    </Grid>
</Page>

CS

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        ((Storyboard)Resources["GradientAnimation"]).Begin();
    }
}

You probably don't want to use colors as saturated as I have in this example. Tweak them to your liking. Also adjust the SpeedRatio to your liking.