为什么此 ColorAnimation 代码不起作用？

Question

我正在使用此代码为使用 LinearGradientBrush 制作的两个渐变停止设置动画。在执行时，代码只是停留在初始梯度停止处，没有任何动画。也没有 exception/error.

XAML:

   <StackPanel x:Name="myStackPanel" Loaded="myStackPanel_Loaded">
    <StackPanel.Triggers>
        <EventTrigger RoutedEvent="StackPanel.Loaded">
            <BeginStoryboard>
                <Storyboard x:Name="colorStoryboard1" Completed="colorStoryboard1_Completed">
                    <ColorAnimation Storyboard.TargetName="GradStop1" 
                  Storyboard.TargetProperty = "Color"
                          From="Lavender" To="PaleVioletRed" Duration="0:0:5"/>
                    <ColorAnimation Storyboard.TargetName="GradStop2" 
                  Storyboard.TargetProperty = "Color"
                          From="White" To="Lavender" Duration="0:0:5"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>

    </StackPanel.Triggers>

    <Panel.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop x:Name="GradStop1" Color="Lavender" Offset="0"/>
            <GradientStop x:Name="GradStop2" Color="White" Offset="1"/>
        </LinearGradientBrush>
    </Panel.Background>

</StackPanel>

触发代码：

 public MainPage()
    {

        this.InitializeComponent();
        colorStoryboard1.Begin();

    }

Answer 1

Triggers、EventTrigger、BeginStoryboard在UWP应用中并不常用，这些API主要是为了兼容XAML原来用于Microsoft Silverlight的。在 UWP 应用程序中，我们应该使用内置动画。

但对于您的场景，如果您的动画导致布局更改或可能影响 UI 线程的性能，您通常需要显式启用动画才能看到它运行 .这意味着，您需要启用 EnableDependentAnimation 属性。更多信息，您可以参考.

因此您可以像这样修改您的代码：

<StackPanel x:Name="myStackPanel">
    <StackPanel.Triggers>
        <EventTrigger RoutedEvent="StackPanel.Loaded">
            <BeginStoryboard>
                <Storyboard x:Name="colorStoryboard1" Completed="colorStoryboard1_Completed">
                    <ColorAnimation Storyboard.TargetName="GradStop1"
                        Storyboard.TargetProperty = "Color"
                        From="Lavender" To="PaleVioletRed" Duration="0:0:5" EnableDependentAnimation="True" />
                    <ColorAnimation Storyboard.TargetName="GradStop2"
                        Storyboard.TargetProperty = "Color"
                        From="White" To="Lavender" Duration="0:0:5" EnableDependentAnimation="True" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </StackPanel.Triggers>

    <StackPanel.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop x:Name="GradStop1" Color="Lavender" Offset="0" />
            <GradientStop x:Name="GradStop2" Color="White" Offset="1" />
        </LinearGradientBrush>
    </StackPanel.Background>
</StackPanel>

对于该方法，由于您已经在XAML中定义了触发器，因此无需在后面的代码中再次触发。

如果您对 UWP 中的内置动画感兴趣，这里有一个示例：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.Resources>
        <Storyboard x:Name="std">
            <ColorAnimation Storyboard.TargetName="GradStop1"
                            Storyboard.TargetProperty = "Color"
                            From="Lavender" To="PaleVioletRed" Duration="0:0:5" EnableDependentAnimation="True" />
            <ColorAnimation Storyboard.TargetName="GradStop2"
                            Storyboard.TargetProperty = "Color"
                            From="White" To="Lavender" Duration="0:0:5" EnableDependentAnimation="True" />
        </Storyboard>
    </Grid.Resources>
    <StackPanel x:Name="myStackPanel" Loaded="myStackPanel_Loaded">    
        <StackPanel.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop x:Name="GradStop1" Color="Lavender" Offset="0" />
                <GradientStop x:Name="GradStop2" Color="White" Offset="1" />
            </LinearGradientBrush>
        </StackPanel.Background>
    </StackPanel>
</Grid>

隐藏代码：

private void myStackPanel_Loaded(object sender, RoutedEventArgs e)
{
    std.Begin();
}

为什么此 ColorAnimation 代码不起作用？

Why is this ColorAnimation Code not working?

animation

xaml

output

uwp

uwp-xaml