动画网格的高度在Windows Phone 8.1中不“运行”

Question

我试图创建一个简单的动画，其中网格从0高度动画到320的设置值（这将给出滑动感觉），同时也动画从0-1开始不透明并返回。

我创建了两个故事板，给他们一个名字，这里是他们：

<Page.Resources> 
    <Storyboard x:Name="OpenSettings" Storyboard.TargetName="SettingGrid"> 
     <DoubleAnimation Storyboard.TargetProperty="Height" Storyboard.TargetName="SettingGrid" To="320"/> 
     <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SettingGrid" To="1"/> 
    </Storyboard> 
    <Storyboard x:Name="CloseSettings"> 
     <DoubleAnimation Storyboard.TargetProperty="Height" Storyboard.TargetName="SettingGrid" To="0"/> 
     <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SettingGrid" To="0"/> 
    </Storyboard> 
</Page.Resources> 

我尝试从代码隐藏动画，就像这样：

private void AppBarButton_Click(object sender, RoutedEventArgs e) 
    { 
     if (settingsOpened) 
     { 

      CloseSettings.Begin(); 
      settingsOpened = false; 
     } 
     else 
     { 
      OpenSettings.Begin(); 
      settingsOpened = true; 
     } 

    } 
bool settingsOpened = false; 

的问题是在高度doubleanimation。它不会更改网格上的任何高度值。顺便说一下，不透明度动画效果很好。

有谁知道我怎么能解决这个问题？

以下是我正在尝试制作动画的网格。注意我如何设置固定的起始值，这使得动画中的“from”属性成为不必要的。

<Grid Opacity="1" Height="0" VerticalAlignment="Top" Name="SettingGrid" Background="#151515"> 
     <CheckBox Margin="10,0,0,0" Content="Use front camera" Height="80"/> 
     <TextBlock Text="IP Address" Margin="10,70,10,0" FontSize="25" FontWeight="Light" Height="30" VerticalAlignment="Top"/> 
     <TextBox Text="127.0.0.1" Margin="10,100,10,0" Height="40" VerticalAlignment="Top" Name="IPBox"/> 
     <TextBlock Text="Port" Margin="10,150,10,0" FontSize="25" FontWeight="Light" Height="30" VerticalAlignment="Top"/> 
     <TextBox Text="12345" Margin="10,180,10,0" Height="40" VerticalAlignment="Top" Name="PortBox"/> 
     <Slider Margin="10,230,10,0" Height="45" VerticalAlignment="Top" Name="updateFreq" Value="20"/> 
     <StackPanel Margin="10,270,0,0" Orientation="Horizontal"> 
      <TextBlock FontSize="25" VerticalAlignment="Top" Margin="10,0,0,0" FontWeight="Light" HorizontalAlignment="Left" Text="{Binding ElementName=updateFreq, Path=Value}"/> 
      <TextBlock Text=" Times per second" FontSize="25" FontWeight="Light" VerticalAlignment="Top"/> 
     </StackPanel> 
    </Grid> 

正如我所说，为什么动画没有做到高度？

Answer 1

尝试在DoubleAnimation是（一个或多个）例如，设置从值：

<Storyboard x:Name="OpenSettings" Storyboard.TargetName="SettingGrid"> 
    <DoubleAnimation Storyboard.TargetProperty="Height" Storyboard.TargetName="SettingGrid" From="0" To="320"/> 
    <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SettingGrid" To="1"/> 
</Storyboard> 
<Storyboard x:Name="CloseSettings"> 
    <DoubleAnimation Storyboard.TargetProperty="Height" Storyboard.TargetName="SettingGrid" From="320" To="0"/> 
    <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SettingGrid" To="0"/> 
</Storyboard> 

编辑：使用 '（FrameworkElement.Height）'，而不是

<Storyboard x:Name="OpenSettings" Storyboard.TargetName="SettingGrid"> 
    <DoubleAnimation Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="SettingGrid" To="320"/> 
    <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SettingGrid" To="1"/> 
</Storyboard> 
<Storyboard x:Name="CloseSettings"> 
    <DoubleAnimation Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="SettingGrid" To="0"/> 
    <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SettingGrid" To="0"/> 
</Storyboard> 

Answer 2

代替动画高度，将RenderTransform添加到设置网格并将其动画到ScaleTransform.ScaleY从0到1.0。另一种选择是使用其中一种内置式个性转换而不是自定义动画（请参阅Quickstart: Animating your UI using library animations (XAML)）

动画高度影响场景的布局，并且需要与主UI线程同步。 这被称为“依赖动画”。对RenderTransform进行动画处理会产生非常相似的效果，但不需要额外的布局传递，并且可以在渲染线程上完全运行。这被称为“独立动画”。

只要有可能，独立动画是首选。应该避免相关的动画，并且默认情况下是禁用的。如果您确实想要坚持使用Height属性进行动画制作，那么您需要将EnableDependentAnimation属性设置为true。

此场景（高度与渲染转换比例）是Make animations smooth (XAML)文档中使用的示例。

Blend是一个很棒的设置你的动画。这是一个简单的例子。因为Blend更灵活，所以更喜欢CompositeTransform。如果你知道你只需要缩放，那么你可以使用ScaleTransform。如果您想从顶部打开而不是从中间打开，您可以将RenderTransformOrigin更改为0.5,0.0。

<Page.Resources> 
    <Storyboard x:Name="OpenSettings"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="SettingGrid"> 
      <EasingDoubleKeyFrame KeyTime="0" Value="0"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="SettingGrid"> 
      <EasingDoubleKeyFrame KeyTime="0" Value="0"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
</Page.Resources> 

<Grid x:Name="SettingGrid" Background="{StaticResource ApplicationPageBackgroundThemeBrush}" RenderTransformOrigin="0.5,0.5"> 
    <Grid.RenderTransform> 
     <CompositeTransform/> 
    </Grid.RenderTransform> 
</Grid>