HOW TO：使用子時刻表簡化動畫
更新：2007 年 11 月
本範例會顯示如何使用子 ParallelTimeline 物件來簡化動畫。Storyboard 是一種 Timeline，可以提供特定時限所包含的目標資訊。使用 Storyboard 以提供時刻表目標資訊，包含物件和屬性資訊。
若要開始動畫，請先使用一或多個 ParallelTimeline 物件，做為 Storyboard 的巢狀子項目。這些 ParallelTimeline 物件可包含其他動畫，因此，可以較佳方法將時間序列封裝在複雜動畫中。例如，如果您在相同 Storyboard 中設計 TextBlock 的動畫和數個圖案，您可以將 TextBlock 的動畫和圖案、將每個項目放入個別的 ParallelTimeline。因為每個 ParallelTimeline 都有專屬的 BeginTime，且 ParallelTimeline 的所有子項目會與 BeginTime 產生關聯，即可以較佳方式封裝時間。
下列範例會從相同 Storyboard 加入兩段文字 (TextBlock 物件) 的動畫。ParallelTimeline 封裝其中一個 TextBlock 物件的動畫。
效能提示： 雖然您可以彼此之間的巢狀化 Storyboard 時間表，ParallelTimeline 會更適用於進行巢狀化，因為他們需要的負荷較少 (Storyboard 類別繼承自 ParallelTimeline 類別)。
範例
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
<Canvas >
<!-- TextBlock with text "ParallelTimelines are..." that gets animated. -->
<TextBlock Name="FirstTextBlock" Canvas.Top="30" Canvas.Left="300" FontSize="24" >
ParallelTimelines are...
<TextBlock.RenderTransform>
<TransformGroup>
<SkewTransform x:Name="FirstTextBlockSkew" CenterX="25" CenterY="25" AngleX="0" AngleY="0" />
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
<!-- TextBlock with text "Useful" that gets animated. -->
<TextBlock Name="SecondTextBlock" Opacity="0" Canvas.Top="30" Canvas.Left="585" FontSize="24" >
Useful
<TextBlock.RenderTransform>
<TransformGroup>
<SkewTransform x:Name="SecondTextBlockSkew" CenterX="25" CenterY="25" AngleX="0" AngleY="0" />
<ScaleTransform x:Name="SecondTextBlockScale" CenterX="0" CenterY="24" />
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
<!-- Event Trigger that controls all animations on the page. -->
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- "ParallelTimelines are..." fades into view. -->
<DoubleAnimation Storyboard.TargetName="FirstTextBlock"
Storyboard.TargetProperty="Opacity" Duration="0:0:2" From="0" To="1" />
<!-- "ParallelTimelines are..." skews to the left. -->
<DoubleAnimation Storyboard.TargetName="FirstTextBlockSkew"
Storyboard.TargetProperty="AngleX" Duration="0:0:1" BeginTime="0:0:2" From="0" To="45" />
<!-- This ParallelTimeline contains all the animations for the TextBlock with the text
"Useful" in it. This ParallelTimeline begins 4 seconds after the Storyboard timeline begins and all child
animations begin relative to this parent timeline. -->
<ParallelTimeline BeginTime="0:0:4">
<!-- "Useful" fades into view. -->
<DoubleAnimation Storyboard.TargetName="SecondTextBlock"
Storyboard.TargetProperty="Opacity" Duration="0:0:2" From="0" To="1" />
<!-- "Useful" slides in from the right. -->
<DoubleAnimation Storyboard.TargetName="SecondTextBlockSkew"
Storyboard.TargetProperty="AngleX" Duration="0:0:2" From="90" To="180" />
<!-- "Useful" skews to the right. -->
<DoubleAnimation Storyboard.TargetName="SecondTextBlockSkew"
Storyboard.TargetProperty="AngleX" BeginTime="0:0:3" Duration="0:0:0.2" From="0" To="-60" />
<!-- "Useful" Gets taller. -->
<DoubleAnimation Storyboard.TargetName="SecondTextBlockScale"
Storyboard.TargetProperty="ScaleY" BeginTime="0:0:3" Duration="0:0:0.2" From="1" To="3" />
</ParallelTimeline>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
</Canvas>
</Page>