操作說明:使用子時間軸簡化動畫
此範例示範如何使用子 ParallelTimeline 物件簡化動畫。 Storyboard是 的型 Timeline 別,可提供其包含之時間軸的目標資訊。 Storyboard使用 提供時間軸目標資訊,包括物件和屬性資訊。
若要開始動畫,請使用一或多個 ParallelTimeline 物件作為 的 Storyboard 巢狀子專案。 這些 ParallelTimeline 物件可以包含其他動畫,因此可以更好地封裝複雜動畫中的計時序列。 例如,如果您要以動畫 TextBlock 顯示 相同 中的 Storyboard 和 數個圖形,則可以分隔 和 圖形的動畫 TextBlock ,將每個圖案放入不同的 ParallelTimeline 中。 因為每個 ParallelTimeline 專案都有自己的 BeginTime 和 開頭的所有子專案 ParallelTimeline 相對於這個 BeginTime ,因此時間會較好地封裝。
下列範例會從相同的 Storyboard 內產生兩個文字( TextBlock 物件)的動畫效果。 ParallelTimeline封裝其中 TextBlock 一個 物件的動畫。
效能注意事項: 雖然您可以在彼此內巢 Storyboard 狀時間軸,但是 更適合巢狀結構, ParallelTimeline 因為它們需要較少的額外負荷。 (類別 Storyboard 繼承自 ParallelTimeline 類別。
範例
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://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>
另請參閱
意見反應
https://aka.ms/ContentUserFeedback。
即將登場:在 2024 年,我們將逐步淘汰 GitHub 問題作為內容的意見反應機制,並將它取代為新的意見反應系統。 如需詳細資訊,請參閱:提交並檢視相關的意見反應