XAML 使动画流畅

Posted 2023-04-12

【中文标题】XAML 使动画流畅

【英文标题】：XAML make animation smooth

【发布时间】：2013-05-12 10:52:52

【问题描述】：

我正在使用 ObjectAnimationUsingKeyFrames 为 GridColumn 宽度属性 (GridLength) 设置动画。我的问题是，是否有可能使动画运行流畅。

<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>

基本上，这个动画应该让GridLength 属性在 0.5 秒内从 300 平滑地变为 0。但它只是在第 5 毫秒从 300 变为 0。

【问题讨论】：

我不是 XAML 方面的专家，但我猜，也许修补 DiscreteObjectKeyFrame KeyTime 可能会做一些好事......也许？

我已经做到了，我也尝试添加更多DiscreteObjectKeyFrames，我需要让它每微秒一个像素一个像素地达到一个平滑的效果，这需要很多DiscreteObjectKeyFrames.

【参考方案1】：

这就是 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;
    

希望这会有所帮助！