如何:使用腳本建立屬性的動畫後進行設定
在某些情況下,您可能會在產生動畫效果之後,無法變更屬性的值。
以動畫顯示 SolidColorBrush 的色彩
在下列範例中,Storyboard 是用來以動畫顯示 SolidColorBrush 的色彩。 按一下按鈕時,就會觸發分鏡腳本。 系統會處理 Completed 事件,以便程式在 ColorAnimation 完成時收到通知。
<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>
變更筆刷色彩
ColorAnimation 完成之後,程式會嘗試將筆刷的色彩變更為藍色。
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 所提供的值。 基礎屬性值 (基本值) 實際上會變更為藍色。 不過,有效或目前的值會維持黃色,因為 ColorAnimation 仍在覆寫基本值。 如果您想要讓基本值再次成為有效值,則必須防止動畫影響屬性。 有三種方式可以透過分鏡腳本動畫來執行此動作:
將動畫的 FillBehavior 屬性設定為 Stop
移除整個分鏡腳本。
從個別屬性移除動畫。
將動畫的 FillBehavior 屬性設定為 Stop
藉由將 FillBehavior 設定 Stop 為,您可以告訴動畫在到達作用期間結束之後停止影響其目標屬性。
<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
移除整個分鏡腳本
藉由使用 RemoveStoryboard 觸發程序或 Storyboard.Remove 方法,您可以告訴分鏡腳本動畫停止影響其目標屬性。 此方法與設定 FillBehavior 屬性之間的差異在於,您可以隨時移除分鏡腳本,而 FillBehavior 屬性只有在動畫到達作用期間結束時才會有效果。
<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
從個別屬性移除動畫
防止動畫影響屬性的另一個技巧是使用正在產生動畫之物件的 BeginAnimation(DependencyProperty, AnimationTimeline) 方法。 指定要顯示動畫的屬性做為第一個參數,並指定 null
作為第二個。
<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
這項技術也適用於非分鏡腳本動畫。