此範例會示範如何指定分鏡腳本動畫之間的轉接行為。 HandoffBehavior 的 BeginStoryboard 屬性會指定新動畫如何與屬性上已套用的任何現有動畫進行互動。
範例
下列範例會建立兩個按鈕，當滑鼠游標移到其上方時，按鈕就會放大，當游標移開時，按鈕就會變小。 如果您將滑鼠移至按鈕上方，然後快速移除游標，則會在完成第一個動畫之前套用第二個動畫。 當兩個動畫像這樣重疊時，您可以看到 HandoffBehavior 和 Compose 在 SnapshotAndReplace 值之間的差異。 Compose 的值會結合重疊的動畫，讓動畫之間的轉換更順暢，而 SnapshotAndReplace 的值會導致新的動畫立即取代先前重疊的動畫。
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<!-- This Style specifies mouseover and mouseout behaviors. The button gets larger when
the cursor moves over it and smaller when the cursor moves away. Note that the same Properties
(ScaleX and ScaleY) are being targeted by both animations. The BeginStoryboard for each animation
uses a HandoffBehavior of "Compose" which causes the old animation to interpolate more gradually into
the new one. -->
<Style x:Key="ButtonWithCompose" TargetType="{x:Type Button}">
<Setter Property="Button.RenderTransform">
<Setter.Value>
<ScaleTransform CenterX="50" CenterY="50" ScaleX="1" ScaleY="1" />
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard >
<Storyboard>
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleX" To="3" />
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleY" To="3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard HandoffBehavior="Compose">
<Storyboard>
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleX" />
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleY" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
<!-- For this button style, BeginStoryboard uses the default HandoffBehavior of "SnapShotAndReplace" -->
<Style x:Key="ButtonWithSnapShotAndReplace" TargetType="{x:Type Button}">
<Setter Property="Button.RenderTransform">
<Setter.Value>
<ScaleTransform CenterX="50" CenterY="50" ScaleX="1" ScaleY="1" />
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard >
<Storyboard>
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleX" To="3" />
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleY" To="3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleX" />
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleY" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Page.Resources>
<Canvas>
<Button Style="{StaticResource ButtonWithSnapShotAndReplace}" Canvas.Top="200" Canvas.Left="200" Width="100" Height="100">
SnapShotAndReplace
</Button>
<Button Style="{StaticResource ButtonWithCompose}" Canvas.Top="200" Canvas.Left="400" Width="100" Height="100">
Compose
</Button>
</Canvas>
</Page>
