如何在 XAML 中为资源设置动画？答案

【问题标题】：How to animate a resource in XAML?如何在 XAML 中为资源设置动画？
【发布时间】：2010-11-06 03:37:55
【问题描述】：

在 XAML 文档中，我有一个渐变画笔作为资源和一堆使用该资源的形状。我想使用情节提要为画笔设置动画，但我不知道如何将资源中的画笔设置为情节提要的目标。仅使用其名称不起作用，{StaticResource name} 也不起作用。有没有可能？

我更喜欢仅使用 XAML 的解决方案，但如果这不起作用，我将使用代码隐藏。如果它让我离开 Storyboard.Target 和 Storyboard.TargetProperty 未分配。

编辑：我想为画笔的渐变停止设置动画。问题是当它不是资源时，我可以轻松地为它制作动画，而是直接应用于对象。我可以通过单击 Expression Blend 来做到这一点。我只是不知道当它是资源时如何为其设置动画（即在下面的代码中放置什么而不是 ?? （故事板是为矩形创建的））

code:
<UserControl.Resources>
    <LinearGradientBrush x:Key="Outline" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#7F7CE3FF" Offset="0"/>
        <GradientStop Color="#7F047695" Offset="1"/>
        <GradientStop Color="#FFFFFFFF" Offset="0.942"/>
    </LinearGradientBrush>
    <Storyboard x:Key="Glitter">
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="??" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Offset)">
            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
            <SplineDoubleKeyFrame KeyTime="00:00:02.6000000" Value="0.529"/>
        </DoubleAnimationUsingKeyFrames>

    </Storyboard>
 ...

【问题讨论】：

标签： wpf xaml animation resources storyboard

【解决方案1】：

当您直接为背景/填充属性设置动画时，它可以使用您想要动画的对象（例如矩形）的名称作为 Storyboard.TargetName：

<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
    <Grid.Resources>
        <LinearGradientBrush x:Key="Outline" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#7F7CE3FF" Offset="0"/>
            <GradientStop Color="#7F047695" Offset="1"/>
            <GradientStop Color="#FFFFFFFF" Offset="0.942"/>
        </LinearGradientBrush>
    </Grid.Resources>

    <Border Name="border" 
            Background="{StaticResource Outline}"
            Width="200" Height="200" />
</Grid>

<Window.Triggers>
    <EventTrigger RoutedEvent="Window.Loaded">
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                                               Storyboard.TargetName="border" 
                                               Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Offset)">
                    <SplineDoubleKeyFrame KeyTime="00:00:0" Value="0"/>
                    <SplineDoubleKeyFrame KeyTime="00:00:1" Value="1"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Window.Triggers>

编辑

从后面的代码看来是完全可以的：

XAML：

<Grid Name="grid">
    <Grid.Resources>
        <LinearGradientBrush x:Key="Outline" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#7F7CE3FF" Offset="0"/>
            <GradientStop Color="#7F047695" Offset="1"/>
            <GradientStop Color="#FFFFFFFF" Offset="0.942"/>
        </LinearGradientBrush>
    </Grid.Resources>

    <Border Background="{StaticResource Outline}"
            Width="100" Height="100" HorizontalAlignment="Left" />

    <Border Background="{StaticResource Outline}"
            Width="100" Height="100" HorizontalAlignment="Right" />
</Grid>

后面的C#代码：

        LinearGradientBrush b = grid.Resources["Outline"] as LinearGradientBrush;

        b.GradientStops[0].BeginAnimation(GradientStop.OffsetProperty, new DoubleAnimation(0, 1, new Duration(TimeSpan.FromSeconds(1))));

【讨论】：

是的，这行得通，但我用那个画笔有多个形状，所以我想我可以一次完成。
正如我所说，我认为不可能对存储在资源中的对象进行动画处理。
我添加了另一个示例，通过代码隐藏为画笔设置动画。这似乎完全没有问题。

【解决方案2】：

您不能为 Brush 类型的属性设置动画，只能为具有适当动画类的类型设置动画，例如 DoubleAnimation、PointAnimation 或 ColorAnimation（请注意，最后一个为 Color 类型的属性设置动画，而不是 Brush）。

但是，某些画笔具有 double 类型的 DependencyProperties，您可以对其进行动画处理，例如 LinearGradientBrush-Class 的 StartPoint 和 EndPoint 属性。

如果你能详细说明动画应该做什么，也许我们可以找到一种解决方法。

编辑：要为画笔设置动画，必须在动画触发器的范围内声明，例如在 Data- 或 ControlTemplate 中。通过其键为资源设置动画将不起作用。

【讨论】：

【解决方案3】：

不确定您要在画笔内部设置动画的确切内容，但是为画笔资源设置动画可能非常棘手。我没有时间输入所有内容，但这里有一些关于如何处理它的“教程”：

Animating Brushes with ObjectAnimationUsingKeyFrames

【讨论】：