HOW TO:使用分鏡腳本建立屬性的動畫後對該屬性進行設定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 屬性Set 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