xaml - samples - ¿Cómo animar el fondo de la red como la aplicación uwp de instagram?

uwp vs wpf

Question

El fondo se sigue transformando de un degradado a otro de una manera muy hermosa. ¿No tengo idea de por dónde empezar? A continuación se muestran las capturas de pantalla:

Answer 1

Aquí hay un ejemplo simple:

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();
}
}

Probablemente no desee utilizar colores tan saturados como los que tengo en este ejemplo. Ajústalos a tu gusto. También ajuste la SpeedRatio a su gusto.