在頁面之間製作漂亮的動畫

Question

我創建了一個適用於Windows商店的應用程序，該應用程序包含幾頁並在每個頁面中顯示不同的背景圖像（該圖像覆蓋了所有屏幕）。 我不希望頁面之間的動畫看起來不錯。 我用EntranceThemeTransition，當內容第一次出現時，有一個很好的動畫。但是當圖像出現時沒有動畫。我可以爲背景圖片創建一些動畫，以便導航很好嗎？

這是在一個頁面中（如果需要的話），我的XAML代碼

<Grid> 
     <Grid.Background> 
      <ImageBrush ImageSource="assets/sunset.jpg" x:Name="cc"/> 
     </Grid.Background> 
     <Grid.ChildrenTransitions> 
      <TransitionCollection> 
       <EntranceThemeTransition/> 
      </TransitionCollection> 
     </Grid.ChildrenTransitions> 
     <StackPanel x:Name="Container"> 
      <Grid HorizontalAlignment="Center" VerticalAlignment="Top" Margin="413,138,438,0" Height="550" Width="515" x:Name="FormContainer"> 
       <TextBox Margin="133,249,131,269" PlaceholderText="Email" BorderBrush="#FF755CB0" BorderThickness="1" Opacity="0.9" x:Name="Email"/> 
       <PasswordBox HorizontalAlignment="Left" Margin="133,298,0,0" VerticalAlignment="Top" Width="251" Height="8" PlaceholderText="Password" BorderBrush="#FF755CB0" BorderThickness="1" Opacity="0.9" x:Name="Password"/> 
       <Button Content="Login" HorizontalAlignment="Left" Margin="130,358,0,0" VerticalAlignment="Top" Width="257" Height="50" Background="#FF235085" BorderBrush="#FF6749AC" BorderThickness="1" Foreground="White" Opacity="0.9" RequestedTheme="Light" Click="Login_Click"/> 

      </Grid> 
     </StackPanel> 
    </Grid> 

Answer 1

在XAML設置的動畫。然後，您可以在加載圖像後在代碼中觸發FadeInAnimation。

XAML

<Page.Resources> 
    <Storyboard x:Name="LoadImageStoryboard"> 
    <FadeInThemeAnimation Storyboard.TargetName="BackgroundImage" /> 
    </Storyboard> 

    <Storyboard x:Name="LoadGridStoryboard"> 
    <FadeOutThemeAnimation Storyboard.TargetName="BackgroundImage" /> 
    </Storyboard> 

</Page.Resources> 
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" 
     Loaded='Grid_Loaded'> 
    <Grid.RowDefinitions> 
     <RowDefinition Height='3*' /> 
     <RowDefinition Height='13*' /> 
    </Grid.RowDefinitions> 
    <Button Click='Button_Click' 
      Content='Load Image' 
      HorizontalAlignment='Center' /> 
    <Image x:Name='BackgroundImage' 
      HorizontalAlignment='Center' 
      Source='assets/sunset.jpg' 
      Grid.RowSpan='1' 
      Grid.Row='1' /> 
    </Grid> 

代碼

private void Button_Click(object sender, RoutedEventArgs e) { 

    // load image here... 

    LoadImageStoryboard.Begin(); 
} 

private void Grid_Loaded(object sender, RoutedEventArgs e) { 
    LoadGridStoryboard.Begin(); 
}