如何:在使用情节提要对属性进行动画处理后设置此属性How to: Set a Property After Animating It with a Storyboard

在某些情况下,它可能显示后进行动画处理,无法更改属性的值。In some cases, it might appear that you can't change the value of a property after it has been animated.

示例Example

在以下示例中,Storyboard使用的颜色进行动画处理SolidColorBrushIn the following example, a Storyboard is used to animate the color of a SolidColorBrush. 单击此按钮时,会触发情节提要。The storyboard is triggered when the button is clicked. Completed ,以便通知程序处理事件时ColorAnimation完成。The Completed event is handled so that the program is notified when the ColorAnimation completes.

<Button
  Content="Animate and Then Set Example 1">
  <Button.Background>
    <SolidColorBrush x:Name="Button1BackgroundBrush"
      Color="Red" />
  </Button.Background>
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation
            Storyboard.TargetName="Button1BackgroundBrush"
            Storyboard.TargetProperty="Color"
            From="Red" To="Yellow" Duration="0:0:5"
            FillBehavior="HoldEnd"
            Completed="setButton1BackgroundBrushColor" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

示例Example

之后ColorAnimation完成后,该程序尝试更改画笔的颜色为蓝色。After the ColorAnimation completes, the program attempts to change the brush's color to blue.

private void setButton1BackgroundBrushColor(object sender, EventArgs e)
{

    // Does not appear to have any effect:
    // the brush remains yellow.
    Button1BackgroundBrush.Color = Colors.Blue;
}
Private Sub setButton1BackgroundBrushColor(ByVal sender As Object, ByVal e As EventArgs)

    ' Does not appear to have any effect:
    ' the brush remains yellow.
    Button1BackgroundBrush.Color = Colors.Blue
End Sub

前面的代码似乎不执行任何操作: 画笔仍然保持为黄色,即的值提供的ColorAnimation,经过动画处理的画笔。The previous code doesn't appear to do anything: the brush remains yellow, which is the value supplied by the ColorAnimation that animated the brush. 基础属性值 (基本值) 实际更改为蓝色。The underlying property value (the base value) is actually changed to blue. 但是,有效,或当前的值仍保持为黄色因为ColorAnimation仍然在重写的基础价值。However, the effective, or current, value remains yellow because the ColorAnimation is still overriding the base value. 如果你想要再次变得有效的值的基础值,必须使动画不再影响该属性。If you want the base value to become the effective value again, you must stop the animation from influencing the property. 有三种方法使用演示图板动画执行此操作:There are three ways to do this with storyboard animations:

  • 设置动画的FillBehavior属性 StopSet the animation's FillBehavior property to Stop

  • 删除整个情节提要。Remove the entire Storyboard.

  • 删除中的各个属性的动画。Remove the animation from the individual property.

将动画的 FillBehavior 属性设置为 StopSet the animation's FillBehavior property to Stop

通过设置FillBehaviorStop,告诉动画停止到达其有效期末尾后影响其目标属性。By setting FillBehavior to Stop, you tell the animation to stop affecting its target property after it reaches the end of its active period.

<Button
  Content="Animate and Then Set Example 2">
  <Button.Background>
    <SolidColorBrush x:Name="Button2BackgroundBrush"
      Color="Red" />
  </Button.Background>
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation
            Storyboard.TargetName="Button2BackgroundBrush"
            Storyboard.TargetProperty="Color"
            From="Red" To="Yellow" Duration="0:0:5"
            FillBehavior="Stop"
            Completed="setButton2BackgroundBrushColor" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>
private void setButton2BackgroundBrushColor(object sender, EventArgs e)
{

    // This appears to work:
    // the brush changes to blue.
    Button2BackgroundBrush.Color = Colors.Blue;
}
Private Sub setButton2BackgroundBrushColor(ByVal sender As Object, ByVal e As EventArgs)

    ' This appears to work:
    ' the brush changes to blue.
    Button2BackgroundBrush.Color = Colors.Blue
End Sub

删除整个情节提要Remove the entire storyboard

通过使用RemoveStoryboard触发器或Storyboard.Remove方法,您告诉情节提要动画停止影响其目标属性。By using a RemoveStoryboard trigger or the Storyboard.Remove method, you tell the storyboard animations to stop affecting their target properties. 此方法和设置之间的区别FillBehavior属性是可以删除情节提要在任何时间,而FillBehavior属性动画到达其活动周期的结尾时才有意义。The difference between this approach and setting the FillBehavior property is that you can remove the storyboard at anytime, while the FillBehavior property only has an effect when the animation reaches the end of its active period.

<Button
  Name="Button3"
  Content="Animate and Then Set Example 3">
  <Button.Background>
    <SolidColorBrush x:Name="Button3BackgroundBrush"
      Color="Red" />
  </Button.Background>
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard Name="MyBeginStoryboard">
        <Storyboard x:Name="MyStoryboard">
          <ColorAnimation
            Storyboard.TargetName="Button3BackgroundBrush"
            Storyboard.TargetProperty="Color"
            From="Red" To="Yellow" Duration="0:0:5"
            FillBehavior="HoldEnd"
            Completed="setButton3BackgroundBrushColor" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>
       private void setButton3BackgroundBrushColor(object sender, EventArgs e)
       {

            // This appears to work:
           // the brush changes to blue.
           MyStoryboard.Remove(Button3);
           Button3BackgroundBrush.Color = Colors.Blue;
       }    
Private Sub setButton3BackgroundBrushColor(ByVal sender As Object, ByVal e As EventArgs)

     ' This appears to work:
    ' the brush changes to blue.
    MyStoryboard.Remove(Button3)
    Button3BackgroundBrush.Color = Colors.Blue
End Sub

从的单个属性中删除动画Remove an animation from an individual property

若要停止的动画影响属性的另一种方法是使用BeginAnimation(DependencyProperty, AnimationTimeline)对象进行动画处理的方法。Another technique to stop an animation from affecting a property is to use the BeginAnimation(DependencyProperty, AnimationTimeline) method of the object being animated. 指定要进行动画处理的第一个参数的属性和null为第二个。Specify the property being animated as the first parameter and null as the second.

<Button
  Name="Button4"
  Content="Animate and Then Set Example 4">
  <Button.Background>
    <SolidColorBrush x:Name="Button4BackgroundBrush"
      Color="Red" />
  </Button.Background>
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation
            Storyboard.TargetName="Button4BackgroundBrush"
            Storyboard.TargetProperty="Color"
            From="Red" To="Yellow" Duration="0:0:5"
            FillBehavior="HoldEnd"
            Completed="setButton4BackgroundBrushColor" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>
       private void setButton4BackgroundBrushColor(object sender, EventArgs e)
       {

            // This appears to work:
           // the brush changes to blue.
           Button4BackgroundBrush.BeginAnimation(SolidColorBrush.ColorProperty, null);
           Button4BackgroundBrush.Color = Colors.Blue;
       }    
Private Sub setButton4BackgroundBrushColor(ByVal sender As Object, ByVal e As EventArgs)

     ' This appears to work:
    ' the brush changes to blue.
    Button4BackgroundBrush.BeginAnimation(SolidColorBrush.ColorProperty, Nothing)
    Button4BackgroundBrush.Color = Colors.Blue
End Sub

此方法也适用于非演示图板动画。This technique also works for non-storyboard animations.

请参阅See also