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

在页面间制作漂亮的动画

1 个答案: