XAML使動畫更流暢

我將GridColumn寬度屬性（GridLength）與ObjectAnimationUsingKeyFrames一起動畫。我的問題是，是否有可能使動畫運行平穩。XAML使動畫更流暢

<Storyboard 
    x:Name="HideOptionsExpandDetails"> 
    <ObjectAnimationUsingKeyFrames 
     Duration="0:0:0.5" 
     Storyboard.TargetName="col1" 
     Storyboard.TargetProperty="Width"> 
     <DiscreteObjectKeyFrame KeyTime="0:0:0.5"> 
      <DiscreteObjectKeyFrame.Value> 
       <GridLength>0</GridLength> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
    </ObjectAnimationUsingKeyFrames> 
</StoryBoard>

基本上這個動畫應該使從300到0 GridLength屬性順利歷時0.5秒。但它在5毫秒內從300變爲0。

來源

2013-05-17 Chris

我不是XAML專家，但我猜測，也許修飾'DiscreteObjectKeyFrame KeyTime'可能會做一些好事......也許？ – Nolonar

我已經這樣做了，我也嘗試添加更多的'DiscreteObjectKeyFrame's，我需要使它每像素像素微秒級以實現平滑的效果，這將需要大量的'DiscreteObjectKeyFrame's。 – Chris

這就是ObjectAnimationUsingKeyFrames的工作原理。由於Width是一個GridLength類型，我們不能使用像DoubleAnimation這樣的內置動畫。

所以，你可以做的是內容的寬度，而不是像這樣：

<Page 
    x:Class="stofSmoothAnimation.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:stofSmoothAnimation" 
    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:Name="Storyboard1"> 
      <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="redBorder"> 
       <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/> 
      </DoubleAnimationUsingKeyFrames> 
     </Storyboard> 
    </Page.Resources> 
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition x:Name="col1" Width="Auto"/> 
      <ColumnDefinition Width="300"/> 
      <ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 
     <Border x:Name="redBorder" Background="Red" Width="300"/> 
     <Border Background="White" Grid.Column="1"/> 
     <Border Background="Black" Grid.Column="2"> 
      <Button x:Name="reduceGridWidth" Click="reduceGridWidth_Click" 
        HorizontalAlignment="Center"> 
       Button 
      </Button> 
     </Border> 
    </Grid> 
</Page>

或者，你可以通過做處理CompositionTarget.Rendering事件像這個動畫自己：

private void reduceGridWidth_Click(object sender, RoutedEventArgs e) 
{ 
    // start handling event 
    CompositionTarget.Rendering += CompositionTarget_Rendering; 
} 

void CompositionTarget_Rendering(object sender, object e) 
{ 
    col1.Width = new GridLength(col1.Width.Value - 20); 

    // when the Width hits zero, we stop handling event 
    if (col1.Width.Value == 0) 
    { 
     CompositionTarget.Rendering -= CompositionTarget_Rendering; 
    } 
}

希望這有助於！

來源

2013-05-17 23:22:50 kimsk

XAML使動畫更流暢

回答

相關問題