動畫網格的高度在Windows Phone 8.1中不「運行」

我試圖創建一個簡單的動畫，其中網格從0高度動畫到320的設置值（這將給出滑動感覺），同時也動畫從0-1開始不透明並返回。動畫網格的高度在Windows Phone 8.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>

正如我所說，爲什麼動畫沒有做到高度？

來源

2014-10-04 Tokfrans

嘗試在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>

來源

2014-10-04 17:09:57 RedLaser

忘了提及我已經嘗試過使用From值，但沒有什麼區別。 – Tokfrans 2014-10-04 21:00:58

好吧，你有沒有嘗試過使用'（FrameworkElement。高度）「而不是」高度「。我會編輯我的答案，告訴你 – RedLaser 2014-10-04 22:44:04

代替動畫高度，將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>

來源

2014-10-04 23:25:24

不幸的是，一個縮放動畫也會縮放邊框，這看起來有點奇怪...... – TheEye 2015-12-03 13:41:55

動畫網格的高度在Windows Phone 8.1中不「運行」

回答

相關問題