c# - 具有多个 ColorAnimations 的 Silverlight Storyboard

Question

我无法弄清楚如何使用 ColorAnimation 沿可见光谱更改椭圆的填充颜色。 ColorAnimation 将颜色混合在一起，而不是沿着色谱移动，所以我想到了以下内容。

<Ellipse x:Name="indicatorEllipse" HorizontalAlignment="Right" VerticalAlignment="Center" Height="20" Width="20" Stroke="Black" Margin="0 0 5 0" >
<Ellipse.Resources>
    <Storyboard x:Name="indicatorStoryboard">
        <!-- Animate the fill color of the Ellipse from red to green over 100 seconds. -->
        <ColorAnimation BeginTime="00:00:00" Storyboard.TargetName="indicatorColorBrush" 
Storyboard.TargetProperty="Color"
From="Red" To="OrangeRed" Duration="0:00:14" />
        <ColorAnimation BeginTime="00:00:15" Storyboard.TargetName="indicatorColorBrush" 
Storyboard.TargetProperty="Color"
From="OrangeRed" To="Orange" Duration="0:00:14" />
        <ColorAnimation BeginTime="00:00:30" Storyboard.TargetName="indicatorColorBrush" 
Storyboard.TargetProperty="Color"
From="Orange" To="Yellow" Duration="0:00:30" />
        <ColorAnimation BeginTime="00:01:01" Storyboard.TargetName="indicatorColorBrush" 
Storyboard.TargetProperty="Color"
From="Yellow" To="YellowGreen" Duration="0:00:14" />
        <ColorAnimation BeginTime="00:01:16" Storyboard.TargetName="indicatorColorBrush" 
Storyboard.TargetProperty="Color"
From="YellowGreen" To="GreenYellow" Duration="0:00:14" />
        <ColorAnimation BeginTime="00:01:31" Storyboard.TargetName="indicatorColorBrush" 
Storyboard.TargetProperty="Color"
From="GreenYellow" To="Green" Duration="0:00:14" />
    </Storyboard>
</Ellipse.Resources>
<Ellipse.Fill>
    <SolidColorBrush x:Name="indicatorColorBrush" Color="Red" />
</Ellipse.Fill>

这是行不通的!这会导致以下错误...

Multiple animations in the same containing Storyboard cannot target the same property on a single element.

有人知道如何实现这个吗？

Answer 1

ColorAnimationUsingKeyFrames 将解决您的问题:

<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Color" Storyboard.TargetName="indicatorColorBrush">
    <SplineColorKeyFrame KeyTime="0:0:2" Value="OrangeRed"/>
    <SplineColorKeyFrame KeyTime="0:0:4" Value="Orange"/>
    <SplineColorKeyFrame KeyTime="0:0:6" Value="Yellow"/>
</ColorAnimationUsingKeyFrames>

我还建议尝试一下 Expression Blend，它使处理动画变得更加容易。