Question

我正在使用此代码为使用LinearGradientBrush制作的两个渐变色块设置动画。在执行时，代码只停留在初始渐变停止处，并且没有任何动画。也没有任何异常/错误。

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主要用于兼容最初用于Microsoft Silverlight的XAML。在UWP应用程序中，我们应该使用内置动画。

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

因此您可以修改代码，例如：

<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 Code不起作用？

1 个答案: