如何動畫網格背景像instagram uwp應用程序？

Question

背景不斷從一個漸變轉換到另一個非常漂亮。我不知道從哪裏開始？ 下面是截圖：

Answer 1

這裏有一個簡單的例子：

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

您可能不想使用飽和的顏色，因爲我在本例中使用了飽和度。調整他們的喜好。還可以根據自己的喜好調整SpeedRatio。