How to animated grid background like instagram uwp

问题:

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

回答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.