在UWP中动画渐变刷

Question

我想动画一个GradientBrush(在我的例子中是LinearGradientBrush)，使用控件的填充属性。我试图改变梯度停止值(偏移或颜色)在我的故事板，但它似乎不工作。我的目标是一个网格背景的例子:

<Grid x:Name="LogoGrid" Height="512" Width="512">
    <Grid.Background>
        <LinearGradientBrush x:Name="LogoBackgroundBrush" StartPoint="0 0" EndPoint="1 1">
            <GradientStop x:Name="Stop0" Color="Transparent" Offset="0" />
            <GradientStop x:Name="Stop1" Color="#80FFFFFF" Offset="0.5" />
            <GradientStop x:Name="Stop2" Color="Transparent" Offset="1" />
        </LinearGradientBrush>
    </Grid.Background>
</Grid>

和storyboard:

<Storyboard x:Key="LoadingStoryBoard">
    <ColorAnimationUsingKeyFrames Storyboard.TargetName="LogoGrid"
            Storyboard.TargetProperty="(UIElement.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"
            RepeatBehavior="Forever" EnableDependentAnimation="True">
        <LinearColorKeyFrame Value="#40000000" KeyTime="0:0:1" />
        <LinearColorKeyFrame Value="#A0FFFFFF" KeyTime="0:0:2" />
    </ColorAnimationUsingKeyFrames>
</Storyboard>

Answer 1

您确定将EnableDependentAnimation设置为true了吗?

你可以看我对另一个类似问题的完整答案。

Answer 2

您没有提到如何开始故事板。无论如何，我通过用x:Name替换x:Key使其工作(否则我无法从代码中引用故事板)。

XAML

<Grid x:Name="LogoGrid">
    <Grid.Resources>
        <Storyboard x:Name="LoadingStoryBoard">
            <ColorAnimationUsingKeyFrames
                Storyboard.TargetName="LogoGrid"
                Storyboard.TargetProperty="(UIElement.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"
                RepeatBehavior="Forever"
                EnableDependentAnimation="True">
                <LinearColorKeyFrame Value="#40000000" KeyTime="0:0:1" />
                <LinearColorKeyFrame Value="#A0FFFFFF" KeyTime="0:0:2" />
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </Grid.Resources>
    <Grid.Background>
        <LinearGradientBrush x:Name="LogoBackgroundBrush" StartPoint="0,0" EndPoint="1,1">
            <GradientStop x:Name="Stop0" Color="Transparent" Offset="0" />
            <GradientStop x:Name="Stop1" Color="#80FFFFFF" Offset="0.5" />
            <GradientStop x:Name="Stop2" Color="Transparent" Offset="1" />
        </LinearGradientBrush>
    </Grid.Background>
</Grid>

后台代码

public sealed partial class MainPage
{
    public MainPage()
    {
        InitializeComponent();
        Loaded += (sender, args) => LoadingStoryBoard.Begin();
    }
}

在GitHub上有一个完整的演示项目。

编辑

Tangetial:这显示了如何通过x:Key而不是我的x:Name访问故事板。诀窍是通过Resources访问故事板，例如:

((Storyboard)Resources["LoadingStoryboard"]).Begin();